Жидкость детей внутри родителя

Question

У меня есть div, который имеет 5 детей. Я хочу, чтобы пространство родителя было разделено равным для 5 детей. Поэтому, если у родителя имеется ширина 1000 пикселей каждый ребенок имеет ширину 200 пикселей. Я попытался установить width: 20%; height: 20%; для детей, но проблема в том, что родитель не будет иметь определенной высоты. Высота родителя будет определяться по высоте детей. Поэтому, если размер экрана изменяется, каждый ребенок занимает до 1/5 of width of the parent, а высота ребенка также будет равна его ширине. Таким образом, ширина родителя будет равна 100% экрана, а высота родителя будет равна высоте ребенка. Я пробовал медиа-запросы, но я думаю, что это более простой способ сделать это, так как я только меняю ширину и высоту, я не меняю общий дизайн страницы.

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<style> 
    #parent {width: 100%} 
    .child {} 
</style> 

Answer 1

В основном вы хотите гибкие элементы, которые сохраняют свои пропорции. Вы можете и должны использовать Flexbox потому, что это удивительным, но если вы не можете сделать это следующим образом:

.child { 
    position: relative; 
    width: 20%;  
} 
.child:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* 1:1 ratio */ 
} 

https://jsfiddle.net/srhogfh8/

Или, как показано здесь: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

(Там будет немного красного пространство, родительский контейнер из-за отображения: inline-block. Вы можете избавиться от пробелов и любой необходимости в margin-left: -4px, не имея пробелов в html для списка. Но ваш html будет выглядеть беспорядочным.)

Answer 2

.child {width:20%;} 

будет заставлять детей быть 1/5 от любой родитель ширина.

Answer 3

height: 20vh; 

попробуйте это, это 20% высоты видового экрана; Подробнее здесь: http://www.w3.org/TR/2006/WD-css3-values-20060919/

Жаль, что я имею в виду

width: 20vw; 

Это 20% от ширины окна просмотра;

Answer 4

Если я правильно понял ваш вопрос правильно вы просто должны установить детский width:20%;

HTML

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

CSS

#parent {width: 100%;} 
.child { width:20%; float:left;} 

Как вы можете видеть на рисунке скрипкой дети определяют родительскую высоту и детский возраст n реагирует на ширину родителя (жидкость).

См рабочий пример: http://jsfiddle.net/ggChris/ff4ukdge/1/

Answer 5

Основной пример F lexbox - без атрибутов для перекрестной поддержки браузера:

<div style = 'display:flex'> 
 
    <div style = 'flex:1;'><div> 
 
    <div style = 'flex:1;'><div> 
 
    <div style = 'flex:1;'><div> 
 
    <div style = 'flex:1;'><div> 
 
    <div style = 'flex:1;'><div> 
 
</div>

Flex: 1 говорит, что каждый из них должен быть равен по размеру. 5 коробок, 100%/5 = 20%.

Использование flex-wrap:row или flex-wrap:column в зависимости от того, как вы хотите их установить, а также посетить https://css-tricks.com/snippets/css/a-guide-to-flexbox/, чтобы узнать о flexboxes

для кросс-браузер Поддержка Современные Chrome, Safari, Firefox и IE11 + я использую следующие классы И как он будет создан в этом примере

.flexme{ 
 
     display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
 
     display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
 
     display: -ms-flexbox;  /* TWEENER - IE 10 */ 
 
     display: -webkit-flex;  /* NEW - Chrome */ 
 
     display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
     } 
 
    .flexrow { 
 
      -webkit-flex-flow: row wrap; 
 
      flex-flow: row wrap; 
 
     } 
 
    .flexrownowrap { 
 
      -webkit-flex-flow: row nowrap; 
 
      flex-flow: column nowrap; 
 
     }  
 
    .flexcol { 
 
      -webkit-flex-flow: column wrap; 
 
      flex-flow: column wrap; 
 
     } `

<div class = 'flexme flexcol'> 
 
    <!-- flexcol assuming you want them in columns --> 
 
    <div class = 'flex1'><div> 
 
    <div class = 'flex1'><div> 
 
    <div class = 'flex1'><div> 
 
    <div class = 'flex1'><div> 
 
    <div class = 'flex1'><div> 
 
</div>