集装箱中的浮动div

我目前正在制作一个网站而不使用框架，但是我遇到了问题。即使容器本身位于容器的中心，我的容器也不会在容器中居中。集装箱中的浮动div

的Html

<body> 
<div id="content"> 
<div class="box"> 

</div> 
<div class="box"> 

</div> 
<div class="box"> 

</div> 
<div class="box"> 

</div> 
</div>

的CSS

#content{ 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
} 

.box{ 
    width: 400px; 
    height: 150px; 
    float: left; 
    border: 1px solid #c8c8c8; 
    border-radius: 3px; 
    margin: 13px; 
}

的div被完全集中时，我有我的窗口，全宽，但一旦我调整它的大小，他们只是重组无定心。

调整前：http://cl.ly/image/2y2g2W0n230g/Screen%20Shot%202014-09-26%20at%2021.50.21.png

我曾尝试不同的方法当谈到定位我感到困惑，解决它，比如做margin: 0 -10%;和margin: 0 25%; ： http://cl.ly/image/241R2I24280w/Screen%20Shot%202014-09-26%20at%2021.49.23.png 调整窗口后。谢谢。

来源

2014-09-26 CodexVideos

只要改变你的CSS这样的，这样你可以在很多方面适应你的盒子和预期他们会以响应布局作出反应：

#content { 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
    text-align:center; 
    display:block; 
} 
.box { 
    width: 45%; 
    height: 150px; 
    display:inline-block; 
    border: 1px solid #c8c8c8; 
    border-radius: 3px; 
    margin: 13px 2%; 
}

See fiddle here

说明：

我已经删除了您的浮动块，使用了块元素并按百分比替换了固定大小。然后，我在容器箱#content中使用了一个text-align:center属性，所以一切都很好地在该容器的中心对齐。现在，如果你调整，列将屏幕宽度的45％，但你可以通过媒体查询明显改变的行为，并使用类似.box{display:box}为小屏幕

来源

2014-09-26 20:01:13 Devin

Hello ，它几乎是完美:)我编辑了一下，以保持原来的宽度（我不希望箱子变小）。我也很欣赏这个小提琴的例子！ '.box {width：400px; height：150px; display：inline-block; border：1px solid＃c8c8c8; border-radius：3px; margin：12px 1％; }' – CodexVideos 2014-09-26 20:06:25

等待，在这种情况下，保持宽度为45％，只需添加'最小宽度：400px' – Devin 2014-09-26 20:07:50

哦好吧谢谢！另外请注意，我也非常欣赏这个解释，帮助我，因为我不擅长定位。 – CodexVideos 2014-09-26 20:08:46

2解决方案：您可以使用宽度的百分比boxes。

#content{ 
    width: 90%; 
    height: 100%; 
    margin: 0 10%; 
} 

.box{ 
    width: 30%; 
    height: 150px; 
    float: left; 
    border: 1px solid #c8c8c8; 
    border-radius: 3px; 
    margin: 13px; 
}

箱子会调整内容的大小，但箱子里的东西可能看起来很奇怪的小尺寸。

或您可以使用像素值为您的content的宽度。而调整

#content{ 
    width: 1200px; 
    height: 100%; 
    margin: 0 10%; 
} 

.box{ 
    width: 400px; 
    height: 150px; 
    float: left; 
    border: 1px solid #c8c8c8; 
    border-radius: 3px; 
    margin: 13px; 
}

的宽度框中不会改变，也不在它的东西，但可以在小屏幕上是痛苦的。

来源

2014-09-26 19:57:41 deKajoo

您的问题有多种解决方案。根据你在这些盒子里面的内容，这可能是最简单的一个：text-align:center与display:inline-block组合;看这里。 Fiddle

来源

2014-09-26 19:59:56

我正在考虑用图像填充它们并用标题覆盖 – CodexVideos 2014-09-26 20:01:32

继续尝试。如果它不起作用，请从小提琴中添加注释的css。如果这样做不起作用，请参阅其他选项。 – 2014-09-26 20:04:27

谢谢我尝试过你的小提琴，它的工作完美！ – CodexVideos 2014-09-26 20:09:16

添加自动利润率为你的箱子

.box{ 
    width: 400px; 
    height: 150px; 
    border: 1px solid #c8c8c8; 
    border-radius: 3px; 
    margin-top: 13px; 
    margin-left:auto; 
    margin-right:auto; 
    }

来源

2014-09-26 20:02:47

我在我的机器上创建了你的文件，并且div不居中，所以我假设你的屏幕或分辨率设置不同，或者你的内容容器在一个或多个其他div中？

无论如何，尝试添加'clear：left;'在你的盒子类代码中，它应该可以解决你的问题（把它放在'float：left'的上面，祝你好运！

来源

2014-09-26 20:25:02

集装箱中的浮动div

回答

相关问题