css - 当当前行(水平屏幕)已满时，如何让 div 内的 div 继续新行？-6ren

css - 当当前行(水平屏幕)已满时，如何让 div 内的 div 继续新行？

转载作者：行者123 更新时间：2023-11-28 17:38:12

我在 asp.net MVC 元素中有以下 html。

在我的布局页面中:

<div style="display:inline-block; vertical-align: top; width:225px; margin-left:10px;">
    <div id="datepicker"></div>

    <div id="typ" style="margin-right:10px;">
        @Html.Action("_GetSomeContent", "Controller")
    </div>
</div>

<div id="body">

    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>

</div>

在 RenderBody 中，我有一个页面包含一个循环，该循环输出一些带有一些内容的 div:

<div style="float:left;width:186px;">
...
....
...
</div>

<div style="float:left;width:186px;">
...
....
...
</div>

我认为 css 是造成问题的原因:

html {
background-color: #e2e2e2;
margin: 0;
padding: 0;   
white-space:nowrap;

}

出于某种原因，当页面水平填满时，div 将继续在同一行上，因此需要水平滚动，而不是像我想要的那样放在下面。

我猜这是因为 white-space:nowrap;在 html 中。但是当我删除 white-space:nowrap 整个 <div id="body">放在布局页面中第一个 div 的下方，我希望这两个 div 始终并排放置。

我怎样才能得到里面的div <div id="body">当前行(水平屏幕)已满时继续新行？

更新

有人回答，但随后删除了有效的内容。我忘了给#body 设置宽度

最佳答案

它可能就像设置正文宽度一样简单:body {width: 100%;}

但我认为使用 display: table;最终将成为解决问题的更强大的方法。试试这些风格:

body {
    display: table;
}
#body { 
    display: table-cell;
}
.firstDiv { 
    display:table-cell; 
    vertical-align: top;
    width:225px; 
    margin-left:10px;   
}

使用 display: table;和 display: table-cell;允许您利用表的性质来填充其父容器中的剩余空间(在本例中为 <body> )

DEMO

关于css - 当当前行(水平屏幕)已满时，如何让 div 内的 div 继续新行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24705785/