html - 使用 div 创建 "product"表

Question

我目前正在研究一些网络类(class)，您会注意到我缺乏网络开发经验。基本上我正在尝试创建用于存放商店产品的表格，但是我想在大部分情况下使用 div 树，如果需要的话，我还想使用文本表格。

本质上，我希望每个独立的表都包含一个图像、一个描述以及最终用 JS 实现的其他数据(我不需要这方面的帮助......但是 ^^)。希望您能从代码中看出我想做什么；

        <div id="items">
            <div id="item1" class="items">
                <img src="img/products/robot1.jpg"/>
            </div>
            <div id="item2" class="items">
                <img src="img/products/robot2.jpg"/>
            </div>
            <div id="item3" class="items">
                <img src="img/products/robot3.jpg"/>
            </div>
        </div>


#content {
width: 600px;
padding-top: 10px;
padding-bottom: 30px;
margin-left: auto;
            margin-right: auto;
        }

.items{
    display:inline; 
}

#items {
    padding-top:10px;
}

#items img{
    border: 1px solid rgba(207, 207, 207, .7);
    border-radius:20px;
}

div 由 600 像素宽的“内容”容器作为父级，考虑到边距，每个表格的宽度必须大约为 193 像素才能在一行中容纳三个“产品”。

我画了一个快速 picture准确地表示我的目标(“按钮”代表“添加到购物车”功能)。

不幸的是，我不能使用任何框架(例如 jquery)来完成任务，所以我只能用艰难的方式做事。提前为我缺乏经验道歉，但希望你能把我引向正确的方向。

编辑:使用 div 只是一种偏好，如果使用独立表单会更容易，我不会介意。

Answer 1

也许这会为您指明正确的方向。

HTML:

<div id="content" class="clearfix">
        <div id="items">
            <div id="item1" class="items">
                <img src="img/products/robot1.jpg"/>
                <a href="" class="add-basket">Add</a>
            </div>
            <div id="item2" class="items">
                <img src="img/products/robot2.jpg"/>
                <a href="" class="add-basket">Add</a>
            </div>
            <div id="item3" class="items">
                <img src="img/products/robot3.jpg"/>
                <a href="" class="add-basket">Add</a>
            </div>
        </div>
</div>

CSS:

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

#content {
width: 600px;
padding-top: 10px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
background:red;
}

.items{
    float:left; 
    width:193px;
    min-height:100px;
    border:1px solid black;
    position:relative;
}

.items a.add-basket {
    position:absolute;
    bottom:0;
    right:0;
    background:black;
    color:#fff;
}

#item1 { margin-right:7px; }
#item2 { margin-right:7px; }

#items {
    padding-top:10px;
}

#items img {
    border: 1px solid rgba(207, 207, 207, .7);
    border-radius:20px;
}

http://jsfiddle.net/DNS8P/1/