CSS，浮動2個圖像在每個與各自的文本在下面

Question

我有一個網站/頁面，http://watershedgeo.staging.wpengine.com/hydroturf/，我試圖浮動2個圖像留在一個div和他們每個有一個小文本塊需要在底下。每個圖像一個塊。

問題是我的圖像在頂部和底部對齊，但下面的文本是當前偏移的方式。

下面是代碼對它們：

<div> 
<div class="container1" style="float: left;"><img style="float: left;" src="/HydroTur-CS_illustration-01152104.jpg" /></div> 
<div style="float: left;"><span style="color: #0079ac; font-weight: bold;">HydroTurf CS</span> 
HydroTurf CS is typically used for high velocity conditions and for protection of critical structures.</div> 
<div> 
<div class="container2" style="float: left;"> 
<div><img style="float: left;" src="/HydroTurfZ_illustration-01152014.jpg" /></div> 
<div style="float: left;">"<span style="color: #0093d0; font-weight: bold;">HydroTurf Z</span> 
HydroTurf Z is ideal for less critical applications involving lower velocities and flow conditions</div> 
</div> 
</div> 
</div> 

Answer 1

除非指定任何塊元件的寬度，如div，它會佔用寬度的100％。因此，例如，如果您希望容器佔用一半的可用寬度，則需要將容器的寬度設置爲50％。另外，您不需要將容器中的所有內容都浮起來，容器是它自己的「塊」，並且您希望所有內容都顯示爲塊內的所有塊（即全部寬度和頂部）。

你想是這樣的：

.container { float: left; width:50%; text-align:left; } 
 

 
/* You won't need the next line, it is simulating the images */ 
 
.container img { width:250px; height:150px; background:#FFFF00; display:block; }

<div class="container"> 
 
<img src="/HydroTur-CS_illustration-01152104.jpg" /> 
 
<div> 
 
    <span style="color: #0079ac; font-weight: bold;">HydroTurf CS</span> HydroTurf CS is typically used for high velocity conditions and for protection of critical structures. 
 
</div> 
 

 
</div> 
 
<div class="container"> 
 
<img src="/HydroTurfZ_illustration-01152014.jpg" /> 
 
<div> 
 
    <span style="color: #0093d0; font-weight: bold;">HydroTurf Z</span> HydroTurf Z is ideal for less critical applications involving lower velocities and flow conditions 
 
</div> 
 
</div>