Отображение: ячейка таблицы с заданной шириной / ячейки на нескольких строках - PullRequest
Новая
       35

Отображение: ячейка таблицы с заданной шириной / ячейки на нескольких строках

0 голосов
/ 15 мая 2018

У меня есть серия div, которые в мобильном телефоне должны отображаться на 50% ширины страницы. Однако они также должны иметь одинаковую высоту (или, по крайней мере, каждая пара из двух элементов div рядом друг с другом должна иметь одинаковую высоту). Я бы предпочел сделать это только с помощью CSS, а не JavaScript. Это был мой начальный код: 

<div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
<div/>

.box-container{
    width:100%;
}
.box{
    width: 50%;
    float:left;
}

Это дает мне коробку с двумя элементами для каждого ряда, но они не имеют одинаковую высоту. Поэтому я изменил его на таблицу: 

.box-container{
    display:table-row;
}
.box{
    display:table-cell;
    float:none;
    position:relative;
    width: 50%;
}

Однако ширина 50%, похоже, не имеет значения, и все элементы отображаются в одной строке. Как я могу сделать так, чтобы они составляли 50% и переходили на новую строку?

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Редактировать . Отказ от ответственности: это не дает конкретного ответа, как это сделать с разметкой таблицы, однако, поскольку OP гибко подходит для решения, я бы порекомендовал это.

Причина, по которой высота вашего div изменяется, заключается в том, что, поскольку вы не указали высоту, она зависит от содержимого внутри него. Вы можете сделать много вещей, например установить свойства min-height или max-height или даже просто установить свойство height. Однако, если вы не знаете высоту или то, что потенциально может быть в div, вы можете воспользоваться flexbox.

Хотя это не поддерживает устаревшие браузеры, это всего лишь один из способов выполнить то, что вы просите: 

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  width: 100%;
}

.box {
  flex: 0 50%;
  background-color: green;
}

/*just for demonstration */
.box:nth-of-type(2) {
  background-color: blue;
}
.box:nth-of-type(3) {
  background-color: purple;
}
<div class="container">
  <div class="box">Box 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Воспользовавшись align-items: stretch:

Элементы Flex растягиваются таким образом, чтобы поперечный размер поля поля элемента совпадал с линией при соблюдении ограничений ширины и высоты.

Ссылки

Flexbox

0 голосов
/ 15 мая 2018

Ваше первое решение лучше, если я правильно понимаю, что вы пытаетесь достичь.

Используя поплавки, не забудьте очистить их, также height: 100% на коробке должно помочь. 

<div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
<div/>

.box-container{
    width:100%;
}
.box-container:after {
  content: "";
  display: table;
  clear: both;
}
.box{
    width: 50%;
    float:left;
    height: 100%;
}

https://jsfiddle.net/Lmpx5w2s/1/

...