html - 浮动 div 与父级高度不同

Question

我想在父 div 中制作两个相邻的 div

像这样：

<--------- 70% ----------> <-- 30% -->
|-------------------------|----------|
|                         |          |
|                         |          |
|-------------------------|----------|

它仅在父级具有固定高度时才有效，但我希望父级是自动的，以便内容完全适合父级。

当父级没有固定高度时：

|-------------------------|----------|
|                         | content  |
|        content          |----------|
|                         |
|-------------------------|

CSS：

.parent {
  background-color: blue;
  height: auto;
}

.biginside {
  background-color: pink;
  height:100%;
  width: 70%;
  float: left;
}

.smallinside {
  background-color: red;
  height: 100%;
  width: 30%;
  float: left;
}

<div class="parent">

  <div class="biginside">
    <p>content</p>
    <p>content</p>
  </div>

  <div class="smallinside">
    <p>content<p>
  </div>

</div>

查看小提琴 http://jsfiddle.net/LQQTm/1/

Answer 1

您可以使用table-cell和table显示。

jsFiddle 演示

.pink {
    width: 70%;
    display: table-cell;
}
.blue {
    display: table;
    width: 100%
}
.red {
    width: 30%;
    display: table-cell;
}

Answer 2

我必须这样做，所以我这样做了：

<div class="pink"> <div class="red"><p>red's content</div></div> <p>pink's content</p> </div>

只有当您确定红色 div 大于粉红色 div 时，您才能执行此操作。另一种方法（如果高度可以不同）是使用 jQuery：

if($('.pink').height() < $('.red').height()){ $('.pink').height($('.red').height()); } else { $('.red').height($('.pink').height()); }

祝你好运！