Question

我有这个Fiddle，有3个浮动元素。我需要＆＃34;浮动＆＃34;元素显示在另一个之上，虽然它们是浮动的，但不是并排显示。

HTML结构：

<div class="main"></div>
<div class="float"></div>
<div class="float"></div>

CSS：

.main, .float {
  border: 1px solid;
  float: right;
  height: 50vh;
}

.main {
  width: 70%;
}

.float {
  width: 30%; // It won't break if it has 15%
}

编辑：

忘记提及我不能嵌套＆＃34;浮动＆＃34;我当前布局方案中30％宽度div的元素。

Answer 1

目前尚不清楚你要做什么，但是从评论......

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}
.main,
.float {
  border: 1px solid;
  float: right;
}
.main {
  width: 70%;
  height: 50vh;
}
.float {
  width: 30%;
  height: 25vh;
}

<div class="main">Main</div>
<div class="float">Float 1</div>
<div class="float">Float 2</div>

不显示内嵌

1 个答案: