Укладка нижнего колонтитула DIVs с CSS

-2

Ищете конкретный порядок укладки внутри гибкого контейнера. Довольно базовый нижний колонтитул разделен на 3 секции, поэтому у вас есть левая и правая Divs 100% высота и 20% ширина. Середина будет сгибаться, чтобы заполнить разницу, но средняя часть должна быть разделена пополам. Таким образом, верх и низ Divs внутри с 50% высоты каждый. Кажется, я не могу понять позиции с абсолютным, фиксированным, ect. Или плавать, что работает лучше всего. БлагодаряУкладка нижнего колонтитула DIVs с CSS

Ok извините, вот CSS внутри гибкого контейнера

.footer_left_box { 
    position: absolute; 
    display: inline-block; 
    float:left; 
    left:0; 
    width: 10%; 
    height: 100%; 
    background-color:#C9D329; 
} 
.footer_middle_top_box { 
    position: relative; 
    display: inline-block; 
    width: 80%; 
    height: 50%; 
    background-color:#2BB851; 
} 
.footer_middle_bottom_box { 
    position: relative; 
    display: inline-block; 
    width: 80%; 
    height: 50%; 
    background-color:#3954D4; 
} 
.footer_right_box { 
    position: absolute; 
    right:0; 
    width: 10%; 
    height: 100%; 
    background-color:#E33538; 
}

Это пример того, что мне нужно

источник

2016-08-03 LeeAlexander

Stackoverflow не является услугой написания кода. Вы должны показать, что вы сделали, опубликовав полный пример вашего кода ** в самом вопросе **. –

Как Хантер сказал: Чтобы помочь вам с CSS, нам сначала нужно увидеть ваш [«Минимальный, полный и проверенный пример»] (http://stackoverflow.com/help/mcve) HTML и попытаться использовать CSS, чтобы мы могли попробовать чтобы решить вашу проблему и объяснить, почему ваша собственная попытка не удалась - таким образом вы можете узнать что-то полезное для вашего будущего развития, а также получить ответ на эту единственную проблему. – andreas

@LeeAlexander поделитесь с нами макетом, который вы хотите, и ваш код html для справки – vickisys

Flexbox может сделать это, но вы, возможно, потребуется адаптировать структуру.

footer { 
 
    height: 150px; 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    flex: 0 0 20%; 
 
} 
 
.left { 
 
    background: rebeccapurple; 
 
} 
 
.right { 
 
    background: #bada55; 
 
} 
 
.middle { 
 
    flex: 1; 
 
    border: 2px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top { 
 
    flex: 0 0 50%; 
 
    background: #c0c0ae; 
 
} 
 
.bottom { 
 
    flex: 0 0 50%; 
 
    background: #c0ffee; 
 
}

<footer> 
 
    <div class="left"></div> 
 
    <div class="middle"> 
 
    <div class="top"></div> 
 
    <div class="bottom"></div> 
 
    </div> 
 
    <div class="right"></div> 
 
</footer>

источник

2016-08-04 09:05:09

спасибо Paulie_D Я ценю ответ и ваше время! – LeeAlexander

Укладка нижнего колонтитула DIVs с CSS

ответ

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