使用div的产品列表CSS样式
我可以使用表来完成以下布局，但我想知道如何使用div来实现它。
如果我用这个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专业人员来说应该是微不足道的。
共有3个答案
我为您创建了一个非常简单的版本。
工作演示-编辑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 class="product">
<div class="image">
//your img
</div>
<div class="desc">
// your desc
</div>
</div>
并将image和desc更改为具有display:inline block而不是display:block如果垂直对齐不正确，可以将垂直对齐：top添加到两者。css应该是这样的：
.product > image,
.product > desc{
display:inline-block;
vertical-align:top;
}
我还没有测试代码，但如果你使用它，应该可以工作。
我喜欢避免使用浮动...
您可以在上使用float:left。productImage，并将clearfix添加到product。我还建议使用header元素（
您还可以将产品标题和描述包装在一个新的div中，并将其浮动。请参见productInfo。
看这个演示
/* Clearfix */
.productsList .product::after {
display: table;
content: " ";
clear: both;
}
.productsList .product .productImage{
float: left;
}
.productsList .product .productInfo {
float: left;
}
-
3.4 产品列表 3.4.1 描述 通过调用该接口为指定订单号的订单明细 3.4.2 请求地址 地址:https://api.bokecs.com/recharge/productList?pageSize=10&pageNum=3 3.4.3 请求方式 GET 3.4.4 请求参数 1) 请求入参 元素名称 是否必须 元素描述 pageNum 否 默认为1 pageSize 否 默认10 2)
-
CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中，有两种类型的列表： 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 - 列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 不同的列表项标记 list-style-type属性指定列表项标记的类型是：:ul.a {
-
产品列表以产品卡片的形式展示了当前用户所有产品。您可以在此查看产品的基本信息并对产品进行整体的操作。 卡片名词解释 1）激活数据：产品第一次发布前，显示为“-”；产品发布后，显示该PID产品的激活数。 2）在线数据：产品第一次发布前，显示为“-”；产品发布后，显示该PID产品的在线数。 操作介绍 1）查看产品日志：点击“查看”按钮，可以查看“产品日志”。产品日志记录了产品所有关键的事件，方便进行当
-
问题内容： 我一直在尝试使用CSS将div分为两列，但是我还没有设法使其正常工作。我的基本结构如下： 如果我尝试将左右div浮动到各自的位置（左右），似乎会忽略内容div的背景色。我在各种网站上尝试过的其他代码似乎无法转换为我的结构。 谢谢你的帮助！ 问题答案： 当您浮动这两个div时，内容div会折叠为零高度。只需添加 在#right div之后但在内容div中。这将迫使内容div包围两个内部浮
-
本文向大家介绍如何使用CSS创建产品卡？，包括了如何使用CSS创建产品卡？的使用技巧和注意事项，需要的朋友参考一下 要使用CSS创建产品卡，代码如下- 示例 上面的代码将产生以下输出-
-
问题内容： 我试图在（C＃）后面的代码中获取div的ID，并在其上设置一些CSS。我可以从DOM中获取它还是必须使用某种控件？ 问题答案： 将属性添加到它，这样您就可以： 这样，您可以使用以下方法访问class属性： 还值得一提的是，该控件实际上是的同义词（至少就渲染标记而言），因此您也可以这样做： 然后，您可以编写： 这使您可以更明确地访问该属性，并且您可能会使用或可能不会使用其他属性。