CSS Высота столбца Fill - PullRequest
Новая
       9

CSS Высота столбца Fill

0 голосов
/ 11 сентября 2018

спасибо, что заглянули на мой вопрос. Я новичок в CSS и HTML и пытаюсь создать скелет веб-страницы. Я пытаюсь создать страницу с flexbox, в которой есть две строки SIDE BY SIDE, каждая с вложенным столбцом. Проблема возникает, когда я пытаюсь растянуть столбцы до «родительской высоты / количества столбцов», это оказывается трудной проблемой, которая не может быть легко решена (по крайней мере из-за чего. Например, столбцу с двумя статьями потребуется высота 50% родительского элемента div, поэтому столбец полностью заполняет его. Для 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>

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Другой подход заключается в использовании свойства 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>
0 голосов
/ 11 сентября 2018

Использование flex-box делает вашу цель намного проще.

Я удалил поля, свойство position (найдено в элементе 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>

Подробнее о box-sizing недвижимости.

Подробнее о flexbox.

Надеюсь, я подтолкнул тебя дальше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...