浮动和错误的父宽度

Question

我有一个父div，里面有很少的div。两者都浮动了。问题是当一个孩子将休息时间划分到下一行时，父div会得到一个错误的宽度。

这是我的HTML

<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>

和CSS：

.parent{
float:left;
border:1px solid black;
}

.child{
margin:1px;
float:left;
width:300px;
height:50px;
border:1px solid black;
background:#65AEF1;
}

这是小提琴： http://jsfiddle.net/FDGqR/1/

如你所见，父div有额外的宽度。我如何强制父div获取孩子真正占用的宽度？

Answer 1

您还可以为percentages %

设置width

.child{
   margin:1px;
   width:33%;
   height:50px;
   border:1px solid black;
   background:#65AEF1;
}

如果这是你想要的，请检查jsFiddle。

Answer 2

这可以使用媒体查询来实现..

只需将以下代码添加到您的css：

@media (max-width: 840px) {
    .parent {
        width: 548px;
    }
}

@media (max-width: 550px) {
    .parent {
        width: 275px;
    }
}

您可能需要设置上述固定宽度以获得更好的设计。

即使我是新手......所以，如果出现问题，请告诉我。）

Working Fiddle

Answer 3

你可以这样做：

<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
    <div style="clear:both;"></div>
    <div class='child'></div>
</div>

使用clear，父div只占用两个子div的宽度

Answer 4

难道你也不能将.parent宽度设置为610px（子宽度的两倍加上边距的小空间）然后你会有两列.child div？

.parent {宽度：610px;}