如何使用CSS将我的Div框架看起来像这样？

时间：2012-10-31 18:33:03

标签： html css css3

我遇到一些问题让我的div盒子看起来像这样：

divbox

我一直试图让我的持有人div框看起来像这样，但我似乎无法像img那样得到它。

这就是我的html的样子：

         <div class="productholdercart">  
         <img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
         <div class="productinfo2"> </div>
         <div class="productprice2"><input type="button" value="Delete" class="button"<div>

这是css：

.productholdercart
{

width: 931px;
height:200px;
margin-left: 133px;
margin-bottom: 30px;
background-color: white; 
border-style:solid;
border-width: 1px;
border-color: #d2d2d2;

background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(50%, white), color-stop(170%, #ffffff)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #ffffff 150%); 
}

.productholdercart img 
{
    margin-top:5px;
    display: inline-block;
    height: 136px;
    width:120px;
}

.productinfo2 
{
    margin-top: 10px;
    display: inline-block;
    vertical-align: top;
    height: 40px;
    border-style:solid;
    border-width:1px;
    width:800px;



}

.productinfo2 h2 
{
font-family:Georgia;
font-size:18px;
color:#BED600;
}

.productinfo2 p 
{
margin-top: -13px;
font-family: Verdana;
font-size:12px;
color:#333333;
}

.productprice2 
{

    width:800px;
    height: 40px;
    text-align: right;
    border-style:solid;
    border-width:1px;
    float:left;

}

.productprice2 h2 
{
font-size: 20px;
color:#333333;
font-family: Verdana;
}

任何形式的帮助都会让它看起来像img。

2 个答案:

答案 0 :(得分：0)

这是我的编辑：

.productholdercart img 
{
margin-top:5px;
display: inline-block;
height: 136px;
width:120px;
 float:left;
}

.productinfo2 
{
margin-top: 10px;
display: inline-block;
vertical-align: top;
height: 40px;
border-style:solid;
border-width:1px;
width:800px;
float:right;


}

.productprice2 
{
width:800px;
height: 40px;
text-align: right;
border-style:solid;
border-width:1px;
float:right;
clear:right;

}

答案 1 :(得分：0)

下面的内容可以帮到你：

  

HTML 

<div id="container">
        <div id="img-container"></div>
        <div class="text-container">
            <div class="product-info"></div>
            <div class="product-info"></div>
        </div>
    </div>
  

CSS 

         #container{width:560px;margin:auto;border:1px solid red;overflow:hiden;height:300px;}
        #img-container{float:left;border:1px solid red;width:200px;height:280px;margin-top:10px;margin-left: 4px;}
        .text-container{float:left;width:340px;height:280px;margin-left:10px;margin-top:10px;}
        .product-info {
    border: 1px solid blue;
    height: 124px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 9px;
    overflow: hidden;
}

DEMO

相关问题
最新问题