центрировать промежуток среди 4?

Question

у меня 4 пролета подряд.

<div id=container>
     <span id="1">blue</span>
     <span id="2">red</span>
     <span id="center">all colors</span>
     <span id="3">grey</span>
</div>

Я хочу, чтобы в центре веб-браузера были «все цвета», а слева - синий и красный, справа - серый.

как я могу это сделать?

Answer 1

<div id="container">
<span class="float_l blue">blue</span>
<span class="float_l red">red</span>
<span>all colors</span>
<span class="float_r gray">grey</span> 
</div>

#container {text-align:center;overflow:hidden;}
#container span {display:block;width:auto;height:20px;line-height:20px;padding:0 10px;}
.float_l {float:left;}
.float_r {float:right;}
.blue {background:blue;}
.red {background:red;}
.gray {background:#ccc;}

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

Answer 2

Можете ли вы дополнить каждую сторону пустыми пролетами, чтобы #center всегда был средним по счету?

Если это так, вы можете установить для каждого диапазона значение display: table-cell (и, возможно, родитель для таблицы или строки таблицы, не знаю, потребуется ли это, чтобы они заполнили ширину) с одинаковой шириной, или, по крайней мере, все, кроме #center с такой же шириной.

Редактировать : Ну, я играл с ним в Firefox, и он совсем не выполняет то, что я ожидал, поэтому единственное решение, которое я могу придумать, это размещение по сценарию.

Редактировать : На самом деле, это вроде как работает с div, установленным с display: table и шириной. * Пожав плечами *