液体布局中的多个居中浮动 div

发布于 2024-09-26 22:26:38 字数 958 浏览 2 评论 0原文

我有一个想要使用的布局的想法，但我无法让它正常工作。我希望这里有人能够提供帮助，因为我花了几个小时进行搜索。

布局是这样的。

一个包装 div 包含 6 个子 div。无论包装器 div 的大小如何，这些子 div 都必须在所有次居中。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

问题是，当浏览器尺寸调整得较小并且一个框被敲到框下方的线上时，框将落在左侧，而我希望它们始终居中。使用纯 css 可以做到这一点吗？或者我需要使用一些 jquery 吗？

原文

I have an idea for a layout I would like to use, but I can't get it to work correctly. I am hoping someone on here might be able to help as I have spent hours searching.

The layout is like so.

One wrapper div houses 6 child divs. Those child divs must be centered at ALL times regardless of the size of the wrapper div.

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

The problem is when the browser is resized smaller and a box is knocked onto the line below the boxes will alight left, whereas I want them to be always centered. Is this possible using pure css or do I need to use some jquery?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眼泪 2024-10-03 22:26:38

最简单的解决方案可能是从框中删除 float: left 样式并将显示属性更改为 inline-block。然后您需要做的就是在包装器上进行文本对齐：居中。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>

您可以在这里测试代码：
http://jsbin.com/uqamu4/edit

Probably the easiest solution is if you remove the float: left style from the boxes and change the display property to inline-block. Then all you need to do is to text-align: center on the wrapper.

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>

You can test the code here:
http://jsbin.com/uqamu4/edit

回复收藏 0 原文

逐鹿 2024-10-03 22:26:38

您可以在包装器中使用 text-align: center ，并对框使用 display: inline-block ，以使它们的行为就像正常的文本元素一样，无论如何都居中。

警告：不适用于 IE6 和 IE 7。适用于 Chrome 和 FF

JSFiddle 此处。

回复收藏 0 原文

负佳期 2024-10-03 22:26:38

这在 ie 8 或更低版本中不起作用，不知道 9 ，但由于您使用 max-width 和 min-width 在那里也不起作用，我无论如何都会发布它。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}

</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

This wont work in ie 8 or less, dont know about 9, but since your using max-width and min-width which dont work there either I'll post it anyway.

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}

</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

回复收藏 0 原文

陌上青苔 2024-10-03 22:26:38

对我有用的解决方案：

<style>
    body {
        /* To center the list */
        text-align: center;
    }

    #wrapper {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    .box {
        display: inline-block;
    }
</style>

The solution that worked for me:

<style>
    body {
        /* To center the list */
        text-align: center;
    }

    #wrapper {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    .box {
        display: inline-block;
    }
</style>

回复收藏 0 原文

~没有更多了~