html - CSS 列高填充

感谢您查看我的问题。我是 CSS 和 html 的新手，正在尝试创建骨架网页。我正在尝试使用 flexbox 创建一个页面，它有两个 SIDE BY SIDE 行，每个行都有一个嵌套列。当我尝试将列拉伸(stretch)到“父高度/列数”时出现问题，这被证明是一个没有简单解决方案的难题(至少从什么开始。例如，包含两篇文章的列需要一个高度为父 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>

最佳答案

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

I deleted the margins, position property(found on the section element with value of absolute), the display property from the .article elements(try to avoid tables they are not responsive), the selectors are based on the current HTML structure, and I set the box-sizing property to border-box for all the elements on the demo.

这是一个工作演示:

* { 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 about box-sizing property.

Learn more about flexbox.

希望我能进一步插入你。

关于html - CSS 列高填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52267316/

html - CSS 列高填充

上一篇：html - Bootstrap 4 切换菜单 "dropdown"(仅在移动 View 中)

下一篇：css - 如何在不使用 React Native 中的字符串的情况下将宽度 (100%) 设置为与其父级相同？