divの各画像に浮動小数点数の2つの画像が表示されています

Question

私はサイト/ページhttp://watershedgeo.staging.wpengine.com/hydroturf/を持っていますが、divに2枚の画像を浮かべようとしています。下に行く。画像ごとに1つのブロック。

問題は、画像が上下に揃っていますが、その下のテキストが現在オフセットされていることです。ここで

は彼らのためのコードです：

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