我有一个向左浮动的无限制/未绑定数量的DIV代码。
在调整浏览器大小时,DIV标记将换行到下一行。
因为DIV标签根据屏幕右侧是否有足够的间距进行换行,当它们进行换行时,会在屏幕右侧留下很大的空间。
因此,如果DIV为32x32,则屏幕右侧会留下32x32的空间。
我希望父DIV在这种情况下将内容居中,所以如果有一个32px的空间在右侧作为换行的结果,它会调整子内容为16px左侧和右侧16px。
例如,如果内容不居中,屏幕将如下所示:
[DIV] [DIV] [DIV] [DIV] .. GAP 。|
[DIV]< -Wrapped ................. |
我想将这些DIV放在父级中,这样当DIV被包装时,内容将如下所示:
..... [DIV] [DIV] [DIV] [DIV] ..... | < - 居中,但仍然向左浮动。
..... [DIV] ...... | < - 父亲居中,但DIV仍在左侧浮动。
仍允许换行,但随着浏览器缩小或水平增长,父DIV会自动将子DIV的内容调整为居中。
我该如何做到这一点?
答案 0 :(得分:1)
正如你所描述的那样,你无法做到。您可以将所有div设置为显示:inline-block而不是float left,然后将它们全部放在带有text-align center的大包装div中。但是,这会使div跳过一条线而不是向左对齐。
或者,您可以设置一个包装器div,其宽度设置为页面的百分比,也是最小像素宽度,然后设置为margin 0 auto。类似的东西:
div.wrapper {width:90%; min-width:800px; margin: 0 auto;}
我怀疑这会做你想的,但我还没有测试过。希望这能激发一些想法!
答案 1 :(得分:0)
这可能不是你要求的,但我认为它符合美学要求:
<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
#wrapper {
margin: 0 auto;
border: 1px solid gray;
text-align: justify;
}
.me {
display: inline-block;
padding: 1em;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id = "wrapper">
<div class="me"><p>One line of stuff in a div.</p></div>
<div class="me"><p>One line of stuff in a div.</p></div>
<div class="me"><p>One line of stuff in a div.</p></div>
<div class="me"><p>One line of stuff in a div.</p>
<p>Or two.</p></div>
<div class="me"><p>One line of stuff in a div.</p></div>
<div class="me"><p>One line of stuff in a div.</p></div>
<div class="me"><p>One line of stuff in a div.</p></div>
</div>
</body>
</html>