时间戳

首页 > 解决方案 > 特殊网格或 flexbox 布局：在框中插入文本的问题

css - 特殊网格或 flexbox 布局：在框中插入文本的问题

问题描述

我为此工作了几个小时：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

body {
  background-color: blue;
}

.content {
  padding: 27px;
  grid-column-gap: 27px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.area {
  overflow: scroll;
  width: 100%;
  background-color: white;
  height: calc(100vh - 27px * 2);
}

.left_area {
  grid-column-start: 1;
  grid-column-end: 6;
}

.right_area {
  grid-column-start: 6;
  grid-column-end: 11;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.top_right_area {
  grid-column-start: 2;
  grid-column-end: 6;
  height: calc(200% - 27px);
}

.bottom_right_area {
  bottom: 0;
  grid-column-start: 1;
  grid-column-end: 11;
  height: 200px;
  align-self: end;
}
<div class="content">

  <div class="area left_area">
  </div>

  <div class="right_area">

    <div class="area top_right_area">
    </div>

    <div class="area bottom_right_area">
    </div>

  </div>

</div>

它应该是这样的： 在此处输入图像描述 在白框中应该是文本。

问题是：如果您在区域中插入文本，则会破坏布局。文本应该是可滚动的。我也尝试用 flexbox 来做，但我没有找到解决方案。

非常感谢您的帮助！

标签： cssflexboxcss-grid

解决方案

你的代码有点复杂。您可以将其简化如下：

body {
  background-color: blue;
  margin: 0;
}

.content {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 27px;
  height: 100vh;
  padding: 27px;
  box-sizing:border-box;
}

.content > * {
  overflow: auto;
  background-color: white;
  grid-column:span 5;
}

.left_area {
  grid-row:span 2;
}

.top_right_area {
  grid-column:span 4/-1;
}
<div class="content">
  <div class="left_area">
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy. Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</div>
  
  <div class="top_right_area">
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</div>

  <div class="bottom_right_area">
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy. 
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.
</div>
</div>

推荐阅读