使用div的產品列表的CSS樣式

我可以使用表格做以下佈局，但想知道如何使用div來實現它。使用div的產品列表的CSS樣式

這就是我試圖實現的。 Product list enter image description here

所以，如果我用這個CSS

body { 
background-color: lightblue; 
} 

.container { 
    background-color: lightgray; 
    width: 1000px; 
    margin: 0 auto; 
} 


.productsList { 
background-color: lightseagreen;  
} 

.productsList .product { 
    background-color: lightgreen; 
    margin: 10px; 
    border: 1px solid #CADFE4; 
} 

.productsList .product .productImage{ 

}

和這個網站

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <link href="style.css" rel="stylesheet"> 
    <title>Products</title> 
</head> 
<body> 
    <div class="container"> 
    <h2>Products list below</h2> 
    <div class="productsList"> 
     <br /> 
     <div class="product"> 
      <div class="productImage">IMG</div> 
      HEADING OF THE PRODUCT 
      description of the product 
     </div> 
     <br /> 
     <div class="product"> 
      <div class="productImage">IMG</div> 
      HEADING OF THE PRODUCT 
      description of the product 
     </div> 
     <br /> 
     <div class="product"> 
      <div class="productImage">IMG</div> 
      HEADING OF THE PRODUCT 
      description of the product 
     </div> 
     <br /> 
    </div> 
</div> 
</body> 
</html>

所以對所有產品的容器，然後將每個產品的div應該有一流的產品.. 我m不能很好地將圖像留下，剩下的文字顯示在右邊。

對於使用div的css專業人員來說應該是微不足道的。

來源

2014-05-13 Cranzy

你試過'浮動：在圖像上left'？ – Mathias

您可以在.productImage上使用float: left，並將一個clearfix添加到.product。我還建議使用標題元素（<h2>，<h3>等）作爲產品標題。

您也可以將您的產品標題和說明包裝在一個新的div中並將其浮動。請參閱.productInfo。

See this demo

/* Clearfix */ 
.productsList .product::after { 
    display: table; 
    content: " "; 
    clear: both; 
} 

.productsList .product .productImage{ 
    float: left; 
} 

.productsList .product .productInfo { 
    float: left; 
}

來源

2014-05-13 06:15:47 Mathias

感謝您的回覆。是的，這似乎是我應該使用的。大！謝謝。 – Cranzy

您需要的圖像和文字分成2個不同的div，像這樣：

<div class="product"> 
    <div class="image"> 
      //your img 
    </div> 
    <div class="desc"> 
      // your desc 
    </div> 
</div>

，改變圖像和desc有顯示：inline-block的，而不是顯示：塊如果垂直對齊不正確，則可以向兩者添加vertical-align：top。該CSS應該是這樣的：

.product > image, 
.product > desc{ 
    display:inline-block; 
    vertical-align:top; 
}

我還沒有測試的代碼，但應該工作，如果你玩它。

我想避免使用浮動...

來源

2014-05-13 06:24:35

既然你想模仿你可以使用顯示器的表：表並顯示：表單元格。正如Andrew所說，你需要爲你的描述添加一個div。由於這是你可能要考慮標記它作爲一個無序列表列表...看到我的小提琴

.productsList .product { 
    display: table; 
} 
.productsList .productImage, 
.productsList .productDescription { 
    display: table-cell; 
    vertical-align: top; 
}

http://jsfiddle.net/ryanswedal/c4gqM/1/

來源

2014-05-13 06:39:34 4CSS

我創建了一個非常簡單的版本給你。

工作演示 - 編輯http://jsfiddle.net/justnath/hLde3/1/

<div class="product"> 
    <div class="productImage">IMG</div> 
    <p> HEADING OF THE PRODUCT description of the product</p> 
</div> 


.productsList .product { 
    background-color: lightgreen; 
    margin: 10px; 
    border: 1px solid #CADFE4; 
} 
.product{ 
    float:left; 
    display:block; 
    width:980px; 
} 
.productsList .product .productImage{ 
    width:150px; 
    height:150px; 
    background-color:grey; 
    float:left; 
    margin-right:10px; 
} 
.productsList .product p{ 
    margin-left:160px; 
}

來源

2014-05-13 06:45:41 websiteninja

使用div的產品列表的CSS樣式

回答

相關問題