2
мне удалось получить CSS3 к почти делать то, что я хочу:Держите элемент центрированного между или выше, два другими элементом
- серого
.top-middleконтейнера произвольной ширины, и всегда должно оставаться заподлицо с верхним краем родительского контейнера (<main>). - Пурпурный левый и правые контейнеры также имеют произвольную ширину и должны всегда оставаться на одном уровне с соответствующими краями родительского контейнера.
- Когда родительский контейнер достаточно широк, три верхних контейнера должны располагаться бок о бок; в противном случае осталось и правая контейнеры должны располагаться под контейнером
.top-middle. (Было бы неплохо, если бы оба фиолетовых контейнера упали одновременно, но я буду жить, когда один из них останется рядом с средним контейнером, когда есть место.) - Минимальная ширина контейнера
<main>должна быть по существу ширина.top-middleконтейнера .top-middleконтейнер должен быть по центру, в идеале относительно родительского контейнера (<main>), но, по крайней мере, по отношению к горизонтальному пространству, доступная для него (между влево и правильных контейнеров)
Это последнее требование, № 5, что я не справился.
Я бы предпочел не прибегать к JavaScript, и, конечно же, это должно быть кросс-браузерное решение. (Меня не волнует IE < 11, хотя люди, использующие этот рывок, больше беспокоятся, чем мои симпатичные!)
N.B. Эту проблему нельзя проверить (AFAIK) в jsfiddle, функцию фрагмента кода StackOverflow или любую другую среду с фиксированной шириной. Скопируйте мой код и вставьте его в файл и посмотрите, что происходит, когда вы расширяете или сужаете окно браузера.
Вот мой полный код, для копирования и вставки удовольствия:
main div {
white-space: nowrap;
color: white;
}
.top-container {
background: olive;
}
.top-middle {
background: grey;
}
.top-left,
.top-right {
background: purple;
}
.bottom-container {
background: blue;
text-align: center;
}
/* The crux of the layout starts here */
main {
height: 300px;
display: flex;
flex-direction: column;
}
.top-container>* {
display: inline-block;
padding: 1em;
}
.top-left {
float: left;
}
.top-right {
float: right;
}
.spacer {
background: silver;
flex-grow: 1;
}<main>
<div class="top-container">
<div class="top-middle">
This should be centred, and always stay on top.
<em>Left</em> and <em>right</em> should drop when the window contracts.
</div>
<div class="top-left">left</div>
<div class="top-right">right</div>
</div>
<div class="spacer"></div>
<div class="bottom-container">This is the bottom.</div>
</main>
Не могли бы вы положить это в jsfiddle так ли WOU ld будет проще отлаживать –
@MattStephens: Я приветствую вас сделать это (как это сделал Крис ниже), но я не уверен, что вы сможете проверить все требования - я не уверен, что вы можете изменять размеры контейнеров в JSFiddle , Во всяком случае, редактирование файла и обновление страницы в браузере довольно просто. –
Используйте медиа-запрос и определите стиль именно для каждого размера. – wwwmarty