Блог

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

Приведенный ниже пример иллюстрирует, какова желаемая ситуация и какова реальная ситуация. Все три поля (красное = 1, зеленое = 2, синее = 3) отображаются при достаточной ширине. Но когда окно уменьшено, должны быть видны только 2. Однако теперь, когда для отображения 3 недостаточно места, он перемещается под 2. Я хочу, чтобы он оставался рядом с 2 и был просто невидимым, точно так же, как поле 1.

HTML:

 <div class="outer">
    <div class="innerleft">
        <div style="width: 300px; height: 300px; background-color: red;">1</div>
    </div>
    <div class="innercenter">
        <div style="width: 500px; height: 100px; background-color: green;">2</div>
    </div>
    <div class="innerright">
        <div style="width: 300px; height: 300px; background-color: blue;">3</div>
    </div>
</div>
  

CSS:

 .outer {
    text-align: center;
    color: white;
    background: purple;
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.innerleft {
    display: inline-block;
    position: absolute;
    margin-left:-300px;
}
.innercenter {
    margin: 0 auto;
    display: inline-block;
}
.innerright {
    display: inline-block;
    position: absolute;
}
  

JSFiddle

Мы высоко ценим вашу помощь. Заранее спасибо!

Замена margin-left:-300px; на right: calc(50% 250px); in .innerleft , а затем добавление left: calc(50% 250px); в .innerright , делает свое дело.

Что здесь делается, так это то, что я установил расстояние от левой и правой сторон divs до чего-то, что нельзя изменить путем изменения размера или масштабирования страницы.

Расчет выполняется 50% сбоку, 50% от ширины центрального div.

Это решение работает только тогда, когда у вас есть статическая ширина для центрального div, которая не может / не будет изменена.

Здесь можно поиграть