Question

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

Answer 1

如果您正在寻找，请点击此处：

<强> 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>

Answer 2

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

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;
}

Answer 3

使用％作为高度相对于父容器的高度。因此，您需要声明父容器的高度。看一下本教程：Equal Height Columns。

Answer 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中工作＆lt; 8添加条件注释：

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

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

4 个答案: