CSS выровнять три дивы по горизонтали

У меня возникли проблемы с выравниванием три дивы внутри родительского DIV, эффект мне нужно следующееCSS выровнять три дивы по горизонтали

|IMAGE| +TEXT+ |IMAGE|

Каждый ДИВ содержит изображения (2) и текст (1) соответственно. Выравнивание их легко, проблема в том, что я хочу, чтобы CENTER div был автоматически шириной до размера окна браузеров и сохранял остальные div ИЗДЕЛИЯ всегда на правой и левой стороне соответственно.

Нечто подобное, например, если пользователь максимизирует окно:

Как вы можете видеть, идея состоит в том, что центр DIV растет, и авто ширины, но с сохранением структуры.

Как я мог получить это поведение? Заранее спасибо.

источник

2010-09-02 lidermin

#container { text-align: center; } 
#div-1 { float: left; } 
#div-2 { display: inline; } 
#div-3 { float: right; }

Если это не ведет себя так, как вы хотите, просьба дать более подробные требования.

источник

2010-09-02 15:31:49

Вот только то, что я искал. Я пропустил встроенную часть дисплея div-2. Благодарю. – lidermin

Просто FYI, вы можете использовать 'display: inline-block;' вместо 'display: inline;', если ваши DIVs не содержат содержимого, и вы просто используете их для хранения фоновых изображений. Я понимаю, что это не относится к заданному вопросу, но это то, что бросает много людей. –

Вот еще один рядный реализация на три стороны изображения бок:

<div style="text-align:center"> 

    <div style="float: left"><img src="image1.png"/></div> 

    <div style="display: inline"><img src="image2.png"/></div> 

    <div style="float: right"><img src="image3.png"/></div> 

</div>

источник

2012-07-30 14:50:45 Ian

+16

Это похоже на ту же реализацию, что и стили inline. – Jack

CSS выровнять три дивы по горизонтали

ответ

Смежные вопросы