Question

我有一些图片，每个图片旁边有一个文字和2个链接，您可以在http://developers-community.com/beta/看到一个实时示例，所以我需要在它们旁边添加一些带有文字和链接的新图像，当然包装材料宽度不会将它们带到线的其余部分，因此我无法为我尝试的新图像创建新行

<br> and <p>

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

Answer 1

这就是你要找的东西..参见演示..

DEMO

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

Answer 2

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

    .pull - left
    {
        display: -webkit - box;
        text - align: left;
        display: inline - block;
        padding: 6px;
    }                                                                 
   .pull - left img
    {
       position: relative;
       display: block;
    }

一些图像的新行，每个图像旁边都有链接和文本

2 个答案: