Question

我想以下列方式定位3个区块。第一个块占用50％的空间（50％宽度和100％高度）。第二个块位于第一个块的左侧，占据宽度的50％和高度的50％。第三个块位于第一个和第二个底部，第二个块与第二个块具有相同的参数。问题是块是灵活的。只占用文本周围的空间。代码：

<body>
<div class="div1">
  <div class="table-display">
    <div class="cell-display div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudanor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    cupiditate doloremque et sint, dolor unde ab. </div>
    <div class="cell-display">
      <div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
      <div class="div4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
    </div>
  </div>

</div>
</body>
</html>

.table-display {
  display: table;
  width: 100%;
}
.cell-display {
  display: table-cell;
  width: 50%;
  position: relative;
}
.div1, .div2, .div3, .div4 {
  padding: 40px;
}
.div1 {
  background: #ABC;
}
.div2 {
  background: #DEF;
}
.div3 {
margin: 40px;
margin-top:0;
  background: #CAD;

  heighth:50%;

}
.div4 {
margin: 40px;
margin-bottom:0;
height:50%;
  background: #FAD;
}

沙箱：https://jsfiddle.net/224wb7v4/

Answer 1

您可以通过将height CSS属性添加到.table-display并修改.div3上的内容来完成您要执行的操作：

.table-display {
  height: 100%;
}

/* note how i changed your 50% to using calc() in this selector. this will subtract the top margin. */
.div3 {
  height: calc(50% - 40px);
}

Working example on JSFiddle.

Answer 2

你应该使用flexbox来设计它。

如果您想了解更多详情，请观看此视频。

https://www.youtube.com/watch?v=JJSoEo8JSnc&t=595s

CSS：如何定位3个街区

2 个答案: