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 Demo

.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()); }

祝你好运！

浮动div与父级不同

2 个答案: