在同一行上左对齐图像，文本中心，右对齐图像

Question

I am trying to align two images one to the left and the other to the right of text. then have the text flow down the middle not underneath the images. I figured this should be fairly easy but cant get it to work. 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

I think you need something like this one.

 #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 and span elements have an inline display.

Removing the parent divs for each of the 3 elements will give you the result you are looking for

Answer 3

You should set the width of the middle column. If you're aiming at newer browsers you could set it to calc(100% - 300px);

<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/