Question

我可以使用表格进行以下布局，但想知道如何使用div来实现它。

这就是我想要实现的目标。 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{

}

和这个html

<!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应该有产品类.. 我无法将图像留下，而其他文本则无法显示在右边。

使用div的css专业人员应该是微不足道的。

Answer 1

您可以在float: left上使用.productImage，并为.product添加一个clearfix。我还建议使用标题元素（<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;
}

Answer 2

你需要将图像和文本分成两个不同的div，如下所示：

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

并更改图像和desc以显示：inline-block而不是display：block 如果垂直对齐不正确，您可以将vertical-align：top添加到它们。 css应该是这样的：

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

我没有测试过代码，但是如果你玩这个代码应该可以使用。

我想避免使用浮动...

Answer 3

由于您要模拟表，您可以使用display：table和display：table-cell。正如安德鲁所说，你需要为你的描述添加一个div。由于这是一个列表，您可能需要考虑将其标记为无序列表...请参阅我的小提琴

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

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

Answer 4

我为您创建了一个非常简单的版本。

工作演示 - 编辑 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;
}

使用div的CSS样式产品列表

4 个答案: