Question

如何浮动两个div高度相同而在第二个div滑落后，容器宽度适合子宽度和divs自动居中？我为我的英语道歉。：（

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
.container{
text-align:center;
display:block;
background-color:grey;
}

.left {
    background-color:#EFF5FB;
    width: 510px;
    float: left;
    min-height:50px;

}

.right {
    float: left;
    width: calc(100% - 520px);
    width: -webkit-calc(100% - 520px);
    width: -moz-calc(100% - 520px);
    width: -o-calc(100% - 520px);
    min-width:510px;
    background-color: #00f;
    height:100%;
    //min-height:50px; (edited)
}
.clear{clear:both;}

</style>
</head>
<body>
<div class="container">
<div class="left"><p>paragraph 1</p><p>paragraph 2</p></div>
<div class="right"><p>paragraph 1</p></div>
<div class="clear"></div>
</div>  
</body>
</html>

[我想这样做] http://i.stack.imgur.com/56gwt.jpg

http://jsfiddle.net/SpSjL/3268/（再次编辑！）

Answer 1

你可以用CSS中的一个简单类来做，宽度：50％页边距：0填充：0并将该类放入你想要放在一起的两个div中，然后你可以像这个例子一样进行媒体查询：

<fo:inline-container vertical-align="top" inline-progression-dimension="49.9%">
    <fo:block>left content</fo:block>
</fo:inline-container>
<fo:inline-container vertical-align="top" inline-progression-dimension="49.9%">
    <fo:block>right-content</fo:block>
</fo:inline-container>

Answer 2

您应该移除浮动广告，并为width: auto;＆amp;提供.left .right元素，在宽度减小的某个点。此外，要使.container中心对齐，请max-width并使用margin-left: auto;＆amp; margin-right: auto;

以下是媒体查询：

    @media (max-width: 600px){
        .container{
            max-width: 400px;
            margin:0 auto;
        }
         .left, .right{
             float: none;
             width: auto;
             padding: 10px;
         }
         .left p{
             padding-bottom: 10px;
         }
    }

添加<p>标记的填充底部以获取元素之间的间距。

在这里找到工作小提琴：http://jsfiddle.net/MasoomS/3xw2qpb8/

Answer 3

您可以使用表格制作两个相同高度的div。

<table style="width:100%">
  <tr>
    <td style="float:right";>Jill</td>
    <td style="float:left";>Smith</td>      
  </tr>
</table>

由于表的<td>元素具有默认显示：table-cell属性使它们以相同的高度显示。

稍后当他们因窗口大小更改而翻转时，您可以添加媒体查询以根据需要进行更改。

如何使相同的高度两个div和中心

3 个答案: