我需要一些帮助来训练我的HTML。它似乎有问题。
总之，我正在处理的页面的内容区域有两列。为了获得多列的外观，我不是为每列使用一个包含div的div，因为列中的一些"行"需要排列。
因此，我基本上使用了几个"行"，每行有两个内联div——一个用于左侧内容，一个用于右侧内容。他们中的大多数工作正常。。但由于某种原因，我的最后一排不是。不管怎样，当我给它一个宽度时，它都不会听我的。
以下是相关HTML的外观：
<div id="mainContainer">
<div id="topBar"></div> //full width
<div id="featured"> //this "row" is working fine
<div id="featuredVideos"></div> //these two
<div id="featuredLiterature"></div> //are inline
</div>
<div id="browseButtons"> //this is the "row" that is acting up
<div id="litBrowse"></div> //these two
<div id="vidBrowse"></div> //are inline
</div>
</div>
同时，哪些类型的情况会导致div听不到宽度？我甚至给litbrowse和vidbrowse1中的每个子div都提供了与它们相同的宽度，450像素，没有骰子。上面的所有内容基本上都有完全相同的结构，运行良好。唯一的区别可能是，该行上方的"行"由两个浮动div组成。
这是一个显示问题的jsfiddle。底部的两个div(按类别浏览照明，按类别浏览视频)应该间隔开，但它们挤在一起，因为它们不会占用450像素的宽度。
问题是您说.browseBtn就是inline。内联元素不需要宽度，只有块级元素需要。
相反，使用inline-block可以随心所欲。它是内联的，足以使div并排，块也足以允许您指定宽度。
请参阅http://jsfiddle.net/abtFr/2/
第二次编辑-其他人回应说使用显示：内联块而不是显示器：内联内联块与IE7不兼容。但是，我们可以通过附加使其兼容
zoom:1;
*display: inline;
到使用内联块的元素。为了与IE6兼容，你需要指定一个高度，所以添加
_height: [yourheight]px;
下划线仅针对IE6。
或者，你可以浮动剩下的元素，在这种情况下，我的原始回复可能是相关的。
EDIT-我在没有看到jsFiddle的情况下进行了响应；这种反应可能在很大程度上被忽视。
要回答您的问题，浮动一个元素将导致它脱离正常布局。如果一个div在另一个div中向左浮动，它将被放置在该容器的最左边，但在调整容器div的大小时不会考虑其尺寸；换句话说，该容器的行为就像里面没有div一样。
要解决此问题，您需要在容器中的浮动div之后放置另一个(空)div，并为其指定样式"clear:bboth"，以便在定位时考虑浮动div。反过来，容器div将看到最后一个清除的div，并调整大小以将其考虑在内。
或者，有时您可以跳过在容器内添加已清除的div，而只将样式"overflow：hidden"添加到容器本身。这有点像黑客攻击，但就黑客攻击而言，这是一个相当强大的攻击。
希望这能解决你的问题；否则，我们将不得不等待更多信息。
很简单，是的，您有一个div，但您将其display定义为inline(使用.browseBtn定义)。因此，它不再是块元素，也不听取width的定义。
我已经校正了小提琴，尽管它可能还有其他副作用。