Question

感谢您看我的问题。我是CSS和html的新手，正在尝试创建框架网页。我试图用flexbox创建一个页面，它有两个SIDE BY SIDE行，每个行都有一个嵌套列。当我尝试将列拉伸到“父级高度/列数”时，就会出现问题，这被证明是一个棘手的问题，没有简单的解决方案（至少是从什么角度来说。例如，包含两篇文章的列需要一个高度为父级div的50％，因此该列将完全填充。3个项目的文章必须为33％的高度才能使该列填充行。

示例图（2行，左边有一个列项目，右边有两个列。

OOOOOOOOOOOOOOOOOOOO
O--text--O---text--O
O--text--O--empty--O
O--text--O--empty--O
O--text--OOOOOOOOOOO
O--text--O---text--O
O--text--O--empty--O
O--text--O--empty--O
OOOOOOOOOOOOOOOOOOOO

当前外观：

OOOOOOOOOOOOOOOOOOOO
O--text--O --text--O
O--text--OOOOOOOOOOO
O--text--O --text--O
O--text--OOOOOOOOOOO
O--text--O--empty--O
O--text--O--empty--O
O--text--O--empty--O
OOOOOOOOOOOOOOOOOOOO

我可以使用Java吗？有人可以借给我他们的智慧吗？

我当前的代码是：

.container {
  border: 1px red solid;
  width: 80%;
  margin: 100px auto 0 auto;
  height: 500px;
  /*height: auto; */
  position: relative;
}

section {
  background-color: #cccccc20;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.row {
  flex: 1;
  border: 1px black solid;
  height: 100%;
}

.col {
  column-fill: balance;
  border: 1px red solid;
}

.article {
  display: table-cell;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="style/style.css">
  <link rel="stylesheet" href="style/structure.css">

  <title></title>
</head>

<body class="container">

  <section>
    <div class="row">

    </div>

    <div class="row">
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </section>

</body>

</html>

Answer 1

使用flex-box使您的目标更加容易。

我从section元素中删除了页边距，位置属性（在absolute元素上，值为display）和.article属性（尝试避免使用表格）它们没有响应），选择器基于当前的HTML结构，并且我将演示中的所有元素的box-sizing属性设置为border-box。

这是一个工作示例：

* { box-sizing: border-box; }

.container {
  border: 1px red solid;
  width: 80%;
  margin: auto;
  height: 500px;
  /*height: auto; */
  position: relative;
}

section {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  background-color: #cccc20;
}

.row {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  border: 1px black solid;
}

.row:nth-of-type(2) {
  display: flex;
  flex-flow: column wrap;
}

.row .col {
  flex: 0 0 50%;
  height: 50%;
  max-height: 50%;
  overflow: auto; /* adds scroll bars if the content is more than the element's height */
  border: 1px red solid;
}

<body class="container">
  <section>
    <div class="row">Some content here</div>
    <div class="row">
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </section>
</body>

Learn more关于box-sizing属性。

Learn more关于flexbox。

希望我进一步推动了你。

Answer 2

另一种方法是使用css grid-area属性：

.item1 {
  grid-area: main;
  height: 300px;
}

.item2 {
  grid-area: right1;
}

.item3 {
  grid-area: right2;
}

.grid-container {
  display: grid;
  grid-template-areas: 'main right1' 'main right2';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.grid-container>div {
  background-color: #DCE1E7;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
}

<h2>Grid Layout</h2>
<div class="grid-container">
  <div class="item1">Main</div>
  <div class="item2">Right1</div>
  <div class="item3">Right2</div>
</div>

CSS列高度填充

2 个答案: