Выровняйте два divs по вертикали вправо от div

Question

Я пытаюсь упорядочить свою веб-страницу в следующем порядке: Разделение, содержащее две секции, выровненные по вертикали слева от раздела с родительской высотой.

Вот быстрый показатель того, что я пытаюсь сделать:

#main { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    box-sizing: border-box; 
    display: block; 
} 

#three { 
    margin:0; 
    padding:0; 
    float:right; 
} 

<div id="main"> 
    <section id="one"> 
    <p>first section</p> 
    </section> 
    <section id="two"> 
    <p>second section</p> 
    </section> 
    <section id="three"> 
    <img> 
    </section> 
</div> 

Какие атрибуты CSS я должен дать каждому из моих разделов?

Answer 1

Другие варианты, если это то, что вы строите с нуля, - использовать каркас, такой как zurb foundation

Это даст вам инструменты для создания такого рода вещи очень быстро и легко, и не только это, но и множество других «сложных» вещей. Я строю около всех моих сайтов в этом, и он удаляет около 75% времени и усилий. Затем вы можете уточнить, что происходит на мобильных и планшетах и ​​т. Д.

Что-то вроде этого будет выглядеть ...

<div class="row"> 
    <div class="medium-6 small-12 columns"> 
     <div id="one" class="small-12 columns"> 
      Your content 
     </div> 
     <div id="two" class="small-12 columns"> 
      Your content 
     </div> 
    </div> 
    <div id="three" class="medium-6 small-12 columns"> 
     Your content 
    </div> 
</div> 

Answer 2

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

#redeem { 
 
    width: 500px; 
 
    position: relative; 
 
    border: 1px solid #C00; 
 
} 
 

 
section { 
 
    border: 1px solid black; 
 
} 
 

 
section#one, 
 
section#two { 
 
    position: absolute; 
 
    left: 0px; 
 
    width: 180px; 
 
} 
 

 
section#one { 
 
    top: 0px; 
 
    bottom: 100px; 
 
} 
 

 
section#two { 
 
    bottom: 0px; 
 
    height: 80px; 
 
} 
 

 
section#three { 
 
    margin-left: 200px; 
 
}

<div id="redeem"> 
 
    <section id="one"> 
 
    <p>first section</p> 
 
    </section> 
 
    <section id="two"> 
 
    <p>second section</p> 
 
    </section> 
 
    <section id="three"> 
 
    <p>third section</p> 
 
    <p>other content of third section</p> 
 
    <p>other content of third section</p> 
 
    <p>other content of third section</p> 
 
    <p>other content of third section</p> 
 
    <p>other content of third section</p> 
 
    </section> 
 
</div>

Answer 3

Я добавил содержащий DIV вокруг #ONE и #two, а затем использовали поплавков

<div id="redeem"> 
    <section id="left-side"> 
     <section id="one"> 
     <p>first section</p> 
     </section> 
     <section id="two"> 
     <p>second section</p> 
     </section> 
    </section> 
    <section id="three"> 
    <p>third section</p> 
    </section> 
    <div class="clear"></div> 
</div> 

#redeem{ 
    width:100%; 
    border-radius:30px; 
    background:blue; 
    padding:30px; 
} 
#left-side{ 
    width:45%; 
    float:left; 
} 
#one{ 
    width:100%; 
    margin-bottom:30px; 
    border-radius:30px; 
    background:white; 
    padding:10px; 
    min-height:130px 
} 
#two{ 
    width:100%; 
    border-radius:30px; 
    background:white; 
    padding:10px; 
    min-height:130px 
} 
#three{ 
    width:45%; 
    float:left; 
    border-radius:30px; 
    background:white; 
    margin-left:5%; 
    padding:10px; 
    min-height:300px 
} 
.clear{ 
    clear:both; 
} 

https://jsfiddle.net/o6h22td4/

Answer 4

сначала дают DIV # погасить ширину

100%

во-вторых сделать нас e дополнительного родительского div, который содержит только div # one и div # two (назовите его, например. DIV # основной)

дают DIV # главную 66% ширины и DIV # три ширина 34% (как вам нравится)

это так.

сделать Div # магистраль столь же высоко как сНу # искупит:

• если DIV # выкупа не имеет фиксированной высоты, это высота будет адаптирована к Div # три или высоту сНу # один и DIV # два (если последние вместе имеют больше высоты, чем div # три)
• для получения дополнительных вопросов (есть множество решений), найдите «две одинаковые высоты div». современное решение (с меньшей поддержкой браузера) было бы использовать flexboxes (блокировка в w3schools). более старым может быть использование css-таблиц (div {display: table} ...) - некоторым людям это не нравится по семантическим причинам, но в некоторых случаях это нормально. «Колонны искусственного интеллекта» - еще одна старая техника. Мое предложение: пусть будет так. пусть DIV # искупит адаптировать его высота зависит от высоты сНу # три

Answer 5

дисплея встроенного блока, один с 2 относительны и другой одной позицией абсолютной, fiddle

.wrapper1 section { 
 
    display: inline-block; 
 
    width: 75%; 
 
    position: relative; 
 
    float: left; 
 
} 
 
.wrapper2 section { 
 
    display: inline-block; 
 
    width: 24%; 
 
    position: absolute; 
 
    float: right; 
 
} 
 
#redeem { 
 
    vertical-align: top!important; 
 
}

<div id="redeem"> 
 
    <div class="wrapper1"> 
 
    <section id="one"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id 
 
     felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
     Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p> 
 
    </section> 
 
    <section id="two"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id 
 
     felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
     Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p> 
 
    </section> 
 
    <div class="wrapper2"> 
 
     <section id="three"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id 
 
      felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p> 
 
     </section> 
 
    </div> 
 
    </div>