如何讓我的Div盒子支架看起來像這裏面用CSS？

我有一些問題讓我的DIV盒子持有人是這樣的：如何讓我的Div盒子支架看起來像這裏面用CSS？

divbox

我一直在試圖讓我的持有者格框的樣子，但我似乎無法得到它像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 。

來源

2012-10-31 Aliana Rose

這裏是我的編輯：

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

}

來源

2012-10-31 18:41:58 Rayshawn

類似下面應該可以幫助你：

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

來源

2012-10-31 18:45:22 defau1t

如何讓我的Div盒子支架看起來像這裏面用CSS？

回答

相關問題