我有一个看起来像这样的 div 框:
.productholder
{
width: 954px;
margin-left: 175px;
margin-bottom: 30px;
background-color: white;
border-style:solid;
border-width: 1px;
border-color: #d2d2d2;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(50%, white), color-stop(170%, #f6f6f6));
background: -moz-linear-gradient(top, white 0%, white 55%, #f6f6f6 150%);
}
我正在尝试获取文本和 img 的结构,例如此示例图片:
但我似乎不能完全像图片一样,任何形式的帮助都将不胜感激如何让我的盒子看起来像这个示例图片。
到目前为止,我已经尝试过:
<div class="productholder">
<img src="url" alt="" />
<h2>Titletext</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamu. etc</p>
<input type="submit" value="More">
<p>$599</p>
<input type="submit" value="Buy">
</div>
img{
float:left;
}
h2{
float:left;
font-size: 14px;
}
任何形式的帮助表示赞赏!