0

我需要一点帮助来规范我的 HTML。好像在大显身手。

无论如何，我正在处理的页面的内容区域有两列。为了获得多列的外观，我没有为每一列使用包含 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 不听宽度？我什至给了里面的每个子 divlitbrowse和vidbrowse1他们拥有的相同宽度，450 像素，并且没有骰子。它上面的所有内容，基本上具有完全相同的结构，工作正常。唯一的区别可能是相关行上方的“行”由两个浮动 div 组成。

这是一个显示问题的jsfiddle。底部的两个 div（按类别浏览，按类别浏览 vid）应该分开，但它们会挤在一起，因为它们不会占用 450px 的宽度。

4

3 回答 3

3

问题是你说的.browseBtn是inline。内联元素不需要宽度，只有块级元素可以。

使用inline-block代替会做你想做的事。它是内联的，足以使 div 并排排列，并足以让您指定宽度。

见http://jsfiddle.net/abtFr/2/

于 2012-10-11T16:01:30.600 回答
2

第二次编辑- 其他人回应说使用display: inline-block而不是display: inline。 inline-block与 IE7 不兼容。但是，我们可以通过附加使其兼容

zoom:1;
*display: inline;

使用 inline-block 到元素。为了兼容IE6，你需要指定一个高度，所以添加

_height: [yourheight]px;

下划线将仅针对 IE6。

或者，您可以将元素浮动到左侧，在这种情况下，我的原始回复可能是相关的。

编辑- 我没有看到 jsFiddle 就做出了回应；这种反应可能在很大程度上可以忽略不计。

要回答您的问题，浮动元素会导致它脱离正常布局。如果一个 div 在另一个 div 中向左浮动，它将被放置在该容器的最左侧，但在调整该容器 div 的大小时不会考虑其尺寸；换句话说，该容器的行为就像里面没有 div。

要解决此问题，您需要在容器内放置另一个（空）div，在浮动 div 之后，并为其分配样式“clear: both”，以便在定位时将浮动 div 考虑在内。反过来，容器 div 将看到最后清除的 div 并调整大小以将其考虑在内。

或者，有时您可以跳过在容器内添加已清除的 div，而只需将样式“溢出：隐藏”添加到容器本身。这有点像黑客，但就黑客而言，这是一个非常强大的黑客。

希望这能解决您的问题；如果没有，我们将不得不等待更多信息。

于 2012-10-11T16:02:09.137 回答
1

这很简单，是的，你有一个div，但你将其定义display为inline（有.browseBtn定义）。所以它不再是一个块元素，它不听width定义。

我已经纠正了 fiddle，尽管它可能有其他副作用。

于 2012-10-11T16:02:58.640 回答