[英]How can I place img and text in a div box like this?
我有一个如下所示的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;
}
任何帮助表示赞赏!
这是一个主意-DEMO
HTML
<div class="productholder">
<img src="http://lorempixel.com/100/100" alt="" />
<div class="productinfo">
<h2>Titletext</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamu. etc</p>
<input type="submit" value="More">
</div>
<div class="productprice">
<h2>$599</h2>
<input type="submit" value="Buy">
</div>
</div>
CSS
.productholder {
width: 954px;
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%);
}
.productholder img {
display: inline-block;
margin: 20px;
}
.productinfo {
border: 1px solid #ccc;
display: inline-block;
margin: 20px 0;
vertical-align: top;
width: 500px;
}
.productinfo input {
float: right;
margin-top: 20px;
}
.productprice {
border: 1px solid #ccc;
width: 150px;
float: right;
margin: 20px;
text-align: center;
}
对于图像,h2和第一个p执行此操作
.productholder{
width: 734px;
padding-left: 220px;
}
.productholder img{
float:left;
margin: 10px;
max-width: 200px;
}
然后给出第二个pa类名,并以margin-right:10px;
对于输入:
input{
position: absolute;
bottom: 5px;
right: 10px;
}
这是一个粗略的草图,但应该正确。
使用简单的代码:
HTML:
<div class="wrapper">
<div class="box-one">dfgdfg</div>
<div class="box-two">dfgdfgdfgdfg</div>
<div class="box-three">dfgdfgdfgdfg</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.wrapper{
width:450px;
background:#A4A4A4;
}
.box-one{
float:left;
width:80px;
}
.box-two{
float:left;
width:300x;
}
.box-three{
float:right;
width:70px;
}
我把骷髅听到了。 自定义CSS并使用它。 欢呼.....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.