CSS - Плавающие секции влево и вправо, отзывчивый дизайн

Я пытаюсь создать отзывчивый макет, где некоторые разделы статьи появятся в правой колонке на больших точках останова. Секции в каждом столбце должны складываться друг над другом.CSS - Плавающие секции влево и вправо, отзывчивый дизайн

Проблема, с которой я столкнулась, заключается в том, что коробка 4 появляется напротив коробки 3, создавая нежелательный промежуток под полем 2 в правой колонке.

.wrapper { 
 
    width: 400px; 
 
} 
 
.section { 
 
    width: 50%; 
 
} 
 
.left { 
 
    float: left; 
 
    clear: left; 
 
    background-color: #E26A6A; 
 
} 
 
.right { 
 
    float: right; 
 
    clear: right; 
 
    background-color: #DCC6E0; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="section left">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor</div> 
 
    <div class="section right">2</div> 
 
    <div class="section left">3</div> 
 
    <div class="section right">4</div> 
 
    </div> 
 
</body>

источник

2014-11-27 Beezer900

вы можете изменить разметку? что означает весь левый элемент друг за другом в разметке? –

в противном случае см. Это: http://stackoverflow.com/questions/26985139/is-it-possible-to-stack-unlimited-divs-left-or-right-arbitrarily-without-a-wrapp –

установить минимальную высоту или высоту секции DIV

.section { 
    min-height: 200px; 
    width: 50%; 
}

http://jsfiddle.net/awkoL2sw/

источник

2014-11-27 11:37:02 Jaishankar

Содержимое каждого div будет варьироваться, поэтому высота должна быть переменной для каждого раздела. – Beezer900

для использования в тексте обложки: flex; – Jaishankar

Использование Flexbox с упрощенной разметкой (в моем примере классы на div элементов не обязательно), вы можете попробовать: http://codepen.io/anon/pen/YPXJNM

Код

HTML

<div class="wrapper"> 
    <div>1 Lorem ipsum dolor sit amet, ... dolor</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    </div>

CSS

.wrapper div:nth-child(2n)  { background: #DCC6E0; } 
.wrapper div:nth-child(2n - 1) { background: #E26A6A; } 

.wrapper { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; } 

.wrapper div { width: 50%; }

Скриншот

enter image description here

Flexbox поддержка через браузер и учебные пособия:

http://caniuse.com/#feat=flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

источник

2014-11-27 11:53:27 fcalderan

CSS - Плавающие секции влево и вправо, отзывчивый дизайн

ответ

Смежные вопросы