如何让固定宽度 DIV 内的浮动 DIV 水平继续？答案

【问题标题】：How to get Floating DIVs inside fixed-width DIV to continue horizontally?如何让固定宽度 DIV 内的浮动 DIV 水平继续？
【发布时间】：2010-11-04 04:30:34
【问题描述】：

我有一个固定高度和宽度 (275x1000px) 的容器 DIV。在这个 DIV 中，我想放置多个浮动 DIV，每个 DIV 宽度为 300 像素，并显示一个水平（x 轴）滚动条，以允许用户左右滚动以查看所有内容。

这是我目前为止的 CSS：

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

问题在于浮动 DIV 不会继续超过容器的宽度。在放置三个浮动 DIV 后，它们将继续在下方。如果我把overflow-y改成auto，就会出现垂直滚动条，我可以向下滚动。

如何更改此设置以使浮动 DIV 继续运行而不会相互向下？

【问题讨论】：

标签： css html css-float

【解决方案1】：

用途：

    div#container {
        overflow: auto;
    }

或者在三个带有样式的div下面添加一个clearing div：

    {
        clear: both
    }

【讨论】：

【解决方案2】：

将你想要滚动的 div 放在一个表格中，如下所示：

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

编辑：我尝试了其中 3 个建议的解决方案 - 它们在 Google Chrome 中都可以正常工作 - 但第一个 (container1) 在 IE 中不起作用（如图） - 所以 SPAN 解决方案得到了我的投票:-) :

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

编辑 2：

我通过 browsershots.org 运行了这个测试页面，看看不同的浏览器是如何处理它的。结论：浏览器兼容性很差。 :-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

表格解决方案的工作频率更高 - 但 span 选项（更简洁）仅在我从未听说过的浏览器上出现问题。 :-)

【讨论】：

@Matthew James Taylor：这太愚蠢了，您不知道表格解决方案是否合适，因为我们不知道 div / 单元格的内容。

【解决方案3】：

表格解决方案应该很好用。

如果您不想使用表格，您还可以将所有 .block div 放在 #container 内的另一个 div 中，并在加载页面后使用 javascript 为“in-between-div”赋予一个固定的 - 计算的 - 宽度.

当然，如果你已经知道你有多少个 .blocks / 如果数量是固定的，你可以使用 css 给“in-between-div”一个固定的宽度。

【讨论】：

这太愚蠢了，您不知道表格解决方案是否合适，因为我们不知道 div / 单元格的内容。
Matt 的原始问题表明他想要“多个浮动 div”，因此很可能不适合使用表格解决方案。
是的，这就是我建议使用 css / javascript 解决方案的原因。我对表格的评论仅指 Ron Savage 的解决方案，该解决方案将始终有效，但使用表格。

【解决方案4】：

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

这里的技巧是只有默认行为为 inline 的元素在 Internet Explorer 中设置为 inline-block 时才会正常运行，因此内部容器需要是而不是

。

【讨论】：

Inline-block 并非所有浏览器都支持，因此不应使用它。
实际上，只要您知道 IE 6/7 的一个问题，它就得到了很好的支持。它在 IE 5.5 或 FF 2 中不起作用，但这些都不能代表当今用户的重要份额。
我遇到了类似的问题，我想在 div 内的元素上执行 float:left。当我这样做时，div 的垂直空间似乎缩小了。仅使用“溢出：自动；”在外部 div 上似乎解决了我的问题。
我一直在避免使用 inline-block，因为我还听说它在 IE7 中不起作用。很高兴知道它适用于跨度，这很容易做到。到目前为止工作得很好。

【解决方案5】：

将浮动的 div 包裹在另一个宽度更宽的 div 中。

<div style="width:230px;overflow-x:auto;background-color:#ccc;">
    <div style="width:400px">
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
    </div>
</div>

【讨论】：

【解决方案6】：

你需要一个额外的大宽度的 div 来包含这些块，然后它们会比容器 div 扩展得更宽，并且不会下降到新的一行。

HTML：

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

CSS：

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

【讨论】：

嘿，我是马修·詹姆斯·泰勒！我发现您的网站是一个非常有用的资源。好答案+1
投了反对票，因为 SPAN 解决方案效果更好，并且对于无限数量的内部块 - 不需要知道估计的宽度。
@Ron 你可能是对的，span 版本可能是最好的，除了将块级元素放入内联元素中可能不是有效的 HTML。看到这个问题：stackoverflow.com/questions/746531/…
@Alex 很高兴在这里见到一位澳大利亚人！感谢您的支持；）
@Matthew James Taylor 没有人推荐在内联元素中使用块元素的解决方案。

【解决方案7】：

听起来你是在用 div 做画廊？

您究竟在用 div 做什么？

在 li 内部使用带有 span 的 ul/li 可能更容易获得相同的效果，而无需担心浮动 div 的所有问题。

【讨论】：

【解决方案8】：

我的前任：

div 宽度：850px 网格视图模板列项目模板

<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>

结束项目模板结束模板列结束网格视图结束 div

按钮的左中间（实际按钮）右跨度不浮动，因为外部 div 具有固定宽度。

我必须在按钮外使用宽度为 140px 的附加 div，然后在 itemtemplate 内使用它。

希望对你有帮助！！！

谢谢你哈里什

【讨论】：

【解决方案9】：

#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.items {
    display: inline-block;
}

<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

这里的技巧是父元素的“white-space: nowrap”属性，它简单地告诉它的所有子元素水平继续，以及它的子元素的“display: inline-block”属性。您无需添加任何其他属性即可完成这项工作。

JS 小提琴：http://jsfiddle.net/2c4jfetf/

【讨论】：