如何使两个div和center的高度相同答案

【问题标题】：How to make same height two div and center如何使两个div和center的高度相同
【发布时间】：2016-06-20 02:32:13
【问题描述】：

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

<!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/（再次编辑！）

【问题讨论】：

你能更清楚地解释你想要什么吗？

标签： html css css-float

【解决方案1】：

您应该删除浮动并在宽度减小的特定点为.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> 标签添加底部填充以获得元素之间的间距。

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

【讨论】：

【解决方案2】：

您可以在 CSS 中使用一个简单的类来实现，宽度：50% 边距：0 填充：0 并将该类放入您想要放在一起的两个 div 中，然后您可以像以下示例一样进行媒体查询：

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

【讨论】：

第一个 div 的大小应该是固定的，另一个 div 会占用剩下的空间。

【解决方案3】：

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

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

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

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

【讨论】：