0

我有一些图像，每个图像旁边都有一个文本和 2 个链接，您可以在以下位置看到一个实时示例：http: //developers-community.com/beta/所以我需要在它们旁边添加一些带有文本和链接的新图像但是当然，包装器的宽度不会将它们放在行的其余部分，所以我很难为我尝试过的新图像创建新行

<br> and <p>

但他们没有在这里工作，当我使用时会发生什么：http <br> and <p>: //jsfiddle.net/9N8Pc/1/当我不这样做时，会发生什么：http://developers-community.com/beta/appsforpages。 html 请帮我解决这个问题，谢谢:)。

4

2 回答 2

0

这就是你要找的东西吗……看演示……

演示

<div style=width:100%;float:left;">

<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>
<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>
<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>
<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>

</div><br>
<div style=width:100%;float:left;">

<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>
<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>
<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>
<div  style="verticalalign:top;float:left;">
     <img src="http://developers-community.com/beta/photoshopcc.png"  align="left">
     <font size="3" style="padding: 10px;color:#008B8B;">Photoshop</font>
 <br>
     <a class="link" href="#"  style="padding:10px">Preview</a>
 <br>
     <a class="link" href="#" style="padding:10px;">Add to your page</a></div>

</div>
于 2013-09-11T09:48:25.000 回答
0

我已经编辑了你的演示，现在看起来像这样....演示

    .pull - left
    {
        display: -webkit - box;
        text - align: left;
        display: inline - block;
        padding: 6px;
    }                                                                 
   .pull - left img
    {
       position: relative;
       display: block;
    }
于 2013-09-11T10:18:03.560 回答