html - 浮动和错误的父宽度

Question

我有一个父 div，里面有几个子 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

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

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

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

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

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

即使我是新手..所以如果出现问题请告诉我:)

工作小提琴

Answer 2

你也可以设置percentages %为width

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

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

Answer 3

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

.parent{宽度：610px;}

Answer 4

你可以这样做：

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

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