изменение ширины DIV в зависимости от содержания и браузера ширина

Question

Скажем, у меня есть кое-что, как показано ниже:

<div id="outer"> 
    <img src="my_first_image.gif" alt="My first image" /> 
    <div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" /> 
</div> 

Мои inner_div содержит некоторые тексты. Как сделать так, чтобы я не только отображал свое первое изображение, мой внутренний div и второе изображение рядом друг с другом, а также убеждался, что общая ширина моего outer div расширяется, чтобы получить полную ширину окна браузера (с мои элементы все еще отображаются один рядом друг с другом, независимо от того, как долго текст в моем внутреннем div становится). Возможно ли это с помощью простого css или мне понадобится jQuery для этого?

Примечание: элементы также должны быть центрирован относительно друг друга и в пределах внешнего DIV

Спасибо

Answer 1

На самом деле, для веб-стандарта, вы не должны размещать <div> рядом <img> или <img> рядом с <div>.

Решение вашего вопроса состоит в том, чтобы обернуть все содержимое в пределах #outer, скажем, каждый элемент, завернутый в тег, затем применил к ним некоторый CSS (например, float: left).
Например,

<div id="outer"> 
    <div class="inner"><img src=".."/></div> 
    <div class="inner"><img src=".."/></div> 
    <div class="inner">some very long text</div> 
</div> 

Какой

<style type="text/css"> 
    .inner { 
     float: left; 
    } 
</style> 

Если вы хотите, чтобы вертикально по центру к внешним, ваш CSS будет так.

<style type="text/css"> 
    #outer { 
     display: table; 
    } 
    .inner { 
     display: table-cell; 
     vertical-align: middle; 
    } 
</style> 

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

Надеюсь, что это поможет.

Answer 2

Я думаю, что это то, чего вы хотите, если я вас правильно понимаю?

<style> 
#outer #inner_div{float:left;} 
#outer img{clear:left;} 

</style> 

Answer 3

Попробуйте этот

CSS

#outer{ 
    width:100%; 
} 
#outer div, #outer img{ 
    width:33%; 
    display:inline-block; 
    vertical-align:middle; 
    text-align:center; 
} 

HTML

<div id="outer"> 
    <img src="my_first_image.gif" alt="My first image" /> 
    <div id="inner_div">Some text here...</div> 
    <img src="my_second_image.gif" alt="My second image" /> 
</div> 

Нужна кросс-старый-браузер для работы inline-block, но вы получите идею.

Presto http://jsfiddle.net/EPpAn/

Answer 4

Я ожидаю, что это то, что вы хотите: http://jsfiddle.net/linmic/CCut8/

Приветствия