html - 如何使用 CSS 使我的 Div 盒子支架在内部看起来像这样？

Question

我在让我的 div 框支架看起来像这样时遇到了一些问题:

我一直试图让我的 holder 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。

Answer 1

这是我的编辑:

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

}