Элемент, выровненный с другим центрированным элементом, который после него

Question

Интересно, как достичь стиля, как в следующем макете?

Красный окно центрируется относительно родительского элемента. Синяя клетка занимает все пространство между краем левого края родительского и правого края синего квадрата. И пробел является лишь частью родительского фона. Красная коробка шириной 300 пикселей.

Answer 1

Вы могли бы добиться этого с помощью таблиц CSS:

Example Here

Просто установите родительский элемент display к table, и добавить table-layout: fixed. Установите display элементов детей на table-cell и дайте им ширину 100%. При этом они будут жидкостно заполнять оставшуюся область.

<div class="parent"> 
    <div class="child"></div> 
    <div class="child fixed"></div> 
    <div class="child"></div> 
</div> 

.parent { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
.parent > .child { 
    display: table-cell; 
    height: 100px; 
    width: 100%; 
} 
.parent > .child.fixed { 
    width: 300px; 
} 

---

В качестве альтернативы, если вы хотите, чтобы избежать таблиц CSS, вы можете также использовать calc() установить ширину элементов. В этом случае width: calc((100% - 300px)/2) будет работать.

Example Here

.parent > .child { 
    height: 100px; 
    width: calc((100% - 300px)/2); 
    display: inline-block; 
    vertical-align: top; 
} 
.parent > .child.fixed { 
    width: 300px; 
} 

Просто browser support для calc() во внимание.