旁边有文字和链接的图片答案

【问题标题】：Images which have text and links beside them旁边有文字和链接的图片
【发布时间】：2013-09-06 19:22:50
【问题描述】：

嘿，我正在尝试嵌入 4 张图片，旁边有 1 个文本和 2 个链接，但我无法通过最后三个...这是到目前为止的代码：

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

我尝试了几个 CSS 东西，比如 holder 和 pic1、pic2、pic3、pic 4，但它似乎只适用于没有文本和链接的图像。我需要获得 3 张与此图片大小相同且链接和文本相同的其他图像。我需要图像是水平的，文本是垂直的。

【问题讨论】：

如果您希望它们水平对齐，可能会删除 <br> 标签
无法猜测您的布局..详细说明。
我知道，我希望它们保持原样，但其他 3 张图片的文字和链接相同
现在如果我三次添加相同的代码...它给出阶梯式布局..但您希望它垂直对齐顶部..是吗。
不，我希望图像是水平的，文本在它们旁边是垂直的。

标签： html css position css-position

【解决方案1】：

喜欢这个

[DEMO]1

css

.pull-left{
    float:left;
}

【讨论】：

完成，对不起，我是新来的：D

【解决方案2】：

working fiddle

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

【讨论】：