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

Question

如何浮动两个divs 高度相同并且在第二个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 中使用一个简单的 class，width: 50% margin:0 padding: 0 并将 class 放入两个 div 中你想放在一起，然后你可以像这个例子一样进行媒体查询：

@media screen and (max-width: 500px) {
    theClassCreated{width:100%;}
}

Answer 2

你可以用table做两个相同高度的div。

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

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

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

Answer 3

您应该删除浮动并在宽度减小的特定点为 .left 和 .right 元素提供 width: auto;。此外，要使 .container 居中对齐，请给出 max-width 并使用 margin-left: auto; & 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> 标签的底部填充以获得元素之间的间距。

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

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

How to make same height two div and center

html

css

css-float