如何在固定宽度DIV中获取浮动DIV以水平继续？-Java 学习之路

我有一个高度和宽度固定的容器DIV（275x1000px） . 在这个DIV中，我想放置多个浮动DIV，每个DIV的宽度为300px，并且有一个水平（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继续运行而不会相互低于？

9 回答

将浮动的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>

回复于 2024-04-30T11:28:59+08:00

0

表解决方案应该可以很好地工作 .

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

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

回复于 2024-04-30T11:28:59+08:00
6

这听起来像你在做div的画廊？

你到底使用的是什么？

在li内部使用带有跨距的ul / li可能更容易获得相同的效果而没有浮动div的所有头痛 .

回复于 2024-04-30T11:28:59+08:00
0
使用：
```
div#container {
        overflow: auto;
    }
```
或者使用样式在三个div下面添加一个清除div：
```
{
        clear: both
    }
```
回复于 2024-04-30T11:28:59+08:00
1
```
div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}
```
这里的技巧只是在Internet Explorer中设置为内联块时，默认情况下行为为内联的元素才会正常运行，因此内部容器需要<span>而不是<div> .
回复于 2024-04-30T11:28:59+08:00

你需要一个宽大的额外div来包含块，然后它们将比容器div扩展得更宽，而不是下降到一个新行 .

The 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>

The 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;
}

回复于 2024-04-30T11:28:59+08:00

#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/

回复于 2024-04-30T11:28:59+08:00

把你想要滚动的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个建议的解决方案 - 它们在谷歌浏览器中都运行良好 - 但第一个（容器1）在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选项（更干净）只能在我从未听说过的浏览器上打破 . :-)

回复于 2024-04-30T11:28:59+08:00

我的前妻：

div width：850px gridview templatedcolumn ItemTemplate

<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>

结束ItemTemplate结束templatedcolumn结束gridview结束div

按钮左侧中间（实际按钮）右侧跨越，其中没有浮动，因为外部div具有固定宽度 .

我不得不在按钮外面使用宽度为140px的额外div，在itemtemplate内部然后它工作 .

希望这可以帮助！！！

谢谢哈里什

回复于 2024-04-30T11:28:59+08:00

如何在固定宽度DIV中获取浮动DIV以水平继续？

9 回答

相关问题