Блог

Я хочу расположить на странице панель, подобную этой:

[corner-l][переменная][орнамент][переменная][corner-r]

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

Все части имеют абсолютно одинаковую высоту в 260 пикселей. Все эти разделы содержат изображение в качестве фонового изображения. «переменная» часть содержит волокно полосы шириной 1 пиксель (опять же, в качестве фонового изображения, с установленным значением repeat-x).

Могу ли я сделать это и, возможно, поддерживать основные браузеры? Каков наилучший способ сделать это?

Могу ли я сделать это и, возможно, поддерживать основные браузеры?

Мой ответ будет работать во всех современных / основных браузерах, за исключением IE7. Я не уверен, считаете ли вы это основным браузером; в настоящее время это погранично.

Смотрите: http://jsfiddle.net/PyTAD / (и измените размер вашего браузера, чтобы проверить плавность)

CSS:

 .barContainer {
    border: 2px dashed #000;
    width: 100%;
    display: table;
    table-layout: fixed
}
.barContainer > div {
    outline: 1px dashed #00f;
    display: table-cell;
    height: 260px
}
.corner-l, .corner-r {
    width: 50px;
    background: #ccc
}
.variable {
    background: #999
}
.ornament {
    background: #f0f;
    width: 100px
}
  

HTML:

 <div class="barContainer">
    <div class="corner-l">1</div>
    <div class="variable">2</div>
    <div class="ornament">3</div>
    <div class="variable">4</div>
    <div class="corner-r">5</div>
</div>
  

Это сохранит орнамент в центре страницы. Ширина будет определяться шириной заголовка-навигации

смотрите это

http://jsfiddle.net/7MnKj/1/

вы можете изменить ширину в .vary и увидеть

ты этого хочешь??