Question

我一直试图并排获得3张图片。我终于得到了我希望它们布局的确切方式。我试过的几种方法，一个图像总是在较小的屏幕上向下移动。我现在拥有它的方式是我想要的确切方式，但我使用的代码有点混乱（甚至不确定是否正确但它有效）。

我的代码有4张图片，只有3张图片。它再次显示了我想要的方式。没有显示的图像是代码中的2。我不希望图像出现，但我知道它也不应该在那里。

我对这些东西很挣扎，所以对于如何正确读取这些内容的任何帮助都表示赞赏。当我删除代码中的2图像时，它们都会脱节。

<div id="content">    
    <center><div><br><br><br><br><br><br>    
    <img src="images/image1.png" width="30%" style="float:left;/> <img src="images/image2.png" width="50%" style="float:left;"/>
</div>
<img src="images/image3.png" width="30%"/><img src="images/image2" width="30%" style="float:right;"/>    
</div>
</center>
<br><br><br><br><br><br><br><br><br></div>   
</div>

Answer 1

这是最简单干净的代码......

小提琴：http://jsfiddle.net/ag3Et/1/

CSS

#content{
    width:100%;
    float:left;
}
#content img{
    width:32%;
    margin-left:1%;
    float:left;
}

HTML

<div id="content">     
        <img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg"/> 
        <img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/HD-Birds-wallpaper-3.jpg"/>
        <img src="http://www.oassf.com/en/media/images/birds_wallpaper.jpg"/>
</div>

Answer 2

<div id="content" width="100%">    

  <div> 
    <img src="1.jpg" width="30%" style="float:left"/> 
    <img src="2.jpg" width="30%" style="float:left"/>
    <img src="3.jpg" width="30%" style="float:left"/>  
  </div>

</div>

Answer 3

这是您的问题的答案..请在使用此代码后将其标记为答案，以便其他人也可以在将来使用它...

<div id="content">    
<center><div><br><br><br><br><br><br>    
<img src="1.jpg" width="30%" style="float:left;"/> 
<img src="2.jpg" width="30%"/>
<img src="3.jpg" width="30%" style="float:right;"/>  
 </div>
</center>
</div>

<br><br><br><br><br><br><br><br><br></div>   
</div>

Answer 4

你一定要刷你的HTML和CSS。

您需要设置固定的像素值，以便您的图像适合放置并保持原样。

CSS：

#content{ width: 960xpx; margin:30px auto; } //the margin is to center this whole block
img{ width: 320px; float:left;} //each image is defined as a fixed 320px
.clear{ clear: both; } //makes sure things don't overlap

HTML：

<div id="content">    

<img src="images/image1.png"/> 
<img src="images/image2.png"/>
<img src="images/image3.png"/>  

<div class="clear">
<!-- SOME OTHER CONTENT HERE -->
</div>

</div>

3水平图像布局问题

4 个答案: