2个相同高度的盒子（百分比）答案

【问题标题】：2 boxes of same height (percentage)2个相同高度的盒子（百分比）
【发布时间】：2011-04-25 19:50:39
【问题描述】：

如何创建两个相同高度的盒子（并排浮动）。我想创建高度为容器/窗口 40% 的框？

【问题讨论】：

标签： html css

【解决方案1】：

使用 % 作为高度是相对于父容器的高度而言的。因此，您需要声明父容器的高度。看看这个教程：Equal Height Columns。

【讨论】：

另外，让我提前警告您：CSS 高度是要完成的更棘手的事情之一stackoverflow.com/questions/3931187/…

【解决方案2】：

See the Example Here

如果这是您要找的，这里还有更多：

CSS：

  #parent{
    width:205px;
    height:200px;
    border:1px solid #000000;
    overflow:auto;
  }

  #child1{
    height:40%;
    background:#00ff00;
    float:left;
  }

  #child2{
    height:40%;
    background:#0000ff;
    float:left;
  }

要点：

float:left 用于并排对齐两个框
height 在 % 中为两个子框指定，以便它们从父框继承。

HTML：

  <div id="parent">
    <div id="child1">
        This is first box
    </div>
    <div id="child2">
        This is second box
    </div>
  </div>

【讨论】：

在我之前到达那里！很好的答案。+1

【解决方案3】：

这对您来说应该是一个简单的解决方案。这是我的例子：

jsfiddle

HTML：

<div class="wrap">
    <div class="left">
        Content
    </div>
    <div class="right">
        More content
    </div>
</div>

CSS：

.wrap
{
    width: 400px;
    height: 500px;
    border: 1px solid #000;
}

.left, .right
{
    float: left;
    width: 45%;a
    height: 40%;
    margin: 2%;
}

.left
{
    border: 1px solid #f00;
}

.right
{
    border: 1px solid #00f;
}

【讨论】：

是的，我可能应该再看看它。我倾向于对大多数事情使用类，以防我不得不在文档中重复一些事情，你知道有些客户是怎样的...... :)

【解决方案4】：

这个问题特别提到了浮动，对此有几个很好的答案，但我认为可能值得发布an answer that doesn't use floats，以防意外提及浮动：

.wrapper {
    width: 400px;
    height: 400px;
    outline: 1px solid #000;
}
.wrapper div {
    display: inline-block;
    width: 198px;
    height: 40%;
    background: #66c;
}
.wrapper div:first-child {
    background: #6c6;
}

<div class="wrapper">
    <div>This is the first box</div>
    <div>This is the second box</div>
    <p>Some other content</p>
</div>

它目前在 WebKit 中不起作用，但我认为这是一个错误并且会有解决方法，我正在调查。如果您需要它在 IE

<!--[if lt IE 8]>
<style>
    .wrapper div { zoom:1; *display:inline;}
</style>
<![endif]-->

【讨论】：