Выровнять изображение влево, центр текста, изображение прямо в той же строке

Question

Я пытаюсь выровнять два изображения один влево, а другой справа от текста. затем текст течет вниз по середине, а не под изображениями. Я полагал, что это должно быть довольно легко, но не может заставить его работать. https://jsfiddle.net/b9nc02cu/

<div style="width:100%"> 
<div style="float:left"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div> 

<div style="float: left; top: 150px; left: 5px;"><span style="font-size: 30px;">Today is September 12, 2015. It's a saturday partly cloudy</span></div> 

<div style="float: right;"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div> 
</div> 

Answer 1

Я думаю, что нужно что-то вроде this один.

#container { 
 
    width: 100%; 
 
} 
 

 
#container > div { 
 
    display: table-cell; 
 
} 
 

 
#left { 
 
    min-width: 150px; 
 
    height: 150px; 
 
} 
 

 
#middle { 
 
    vertical-align: top; 
 
    height: 150px; 
 
} 
 

 
#right { 
 
    min-width: 150px; 
 
    height: 150px; 
 
}

<div id="container"> 
 
    
 
    <div id="left"> 
 
     <img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"> 
 
    </div> 
 
    
 
    <div id="middle"> 
 
     Today is September 12, 2015. It's a saturday partly cloudy 
 
    </div> 
 
    
 
    <div id="right"> 
 
     <img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"> 
 
    </div> 
 
    
 
</div>

Answer 2

IMG и диапазона элементов имеют встроенный дисплей.

Удаление родительских див для каждого из 3-х элементов даст вам результат, который вы ищете

Answer 3

Вы должны установить ширину средней колонки. Если вы нацелены на новые браузеры, вы можете установить его на calc (100% - 300 пикселей);

<div style="width:100%"> 
    <div style="float:left"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div> 
    <<div style="float: left; top: 150px; width: calc(100% - 300px);"><span style="font-size: 30px;">Today is September 12, 2015. It's a saturday partly cloudy</span></div> 
    <div style="float: right;"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div> 
</div> 

https://jsfiddle.net/b9nc02cu/1/