1

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のように見せるために、どんな種類の助けもありがたいです。

4

2 に答える 2

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;

}
于 2012-10-31T18:41:58.617 に答える
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;
}

デモ

于 2012-10-31T18:45:22.817 に答える