CSS，在div中浮动2个图像，每个图像下面都有相应的文本

Question

我有一个网站/页面http://watershedgeo.staging.wpengine.com/hydroturf/，其中我试图将两个图像留在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>