用div创建“产品”表

Question

我目前正在从事一些网络课程的学习，您会发现我缺乏网络开发经验。 基本上，我试图创建包含商店产品的表，但是我想在大多数情况下使用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的父元素是“内容”容器，该容器的宽度为600px，每个表的宽度必须大约为193px，这样才能在考虑到边距的情况下连续容纳三个“产品”。

我画了一张简短的图片来准确表达我的目标（“按钮”代表“添加到购物篮”功能）。

不幸的是，我无法使用诸如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/

Answer 2

这里有一个FIDDLE通过您所提供的图像。

<div id="content">
  <h1>Products</h1>
  <div id="items">
    <div id="item1" class="items">
      <img src="img/products/robot1.jpg"/>
      <span class="desc">Description</span>
      <span class="price">$100</span>
      <span class="other">Other</span>
      <button>BUY</button>      
    </div>
    <div id="item2" class="items">
      <img src="img/products/robot2.jpg"/>
      <span class="desc">Description</span>
      <span class="price">$100</span>
      <span class="other">Other</span>
      <button>BUY</button>
    </div>
    <div id="item3" class="items">
      <img src="img/products/robot3.jpg"/>
      <span class="desc">Description</span>
      <span class="price">$100</span>
      <span class="other">Other</span>
      <button>BUY</button>      
    </div>
  </div>
</div>


#content {
  width: 600px;
  padding: 10px 10px 30px 10px;
  margin: 30px auto;
  text-align: center;
  border: 1px solid #999;
}

#items {
  padding-top:10px;
}

.items{
  display: inline-block;
  text-align: center;
  width: 180px;
  margin: 0 7px 0 7px;
  padding-top: 10px;
  border: 1px solid #999;
  border-radius: 20px;
}

.items img {
  width: 160px;
  height: 140px;
  border: 1px solid rgba(207, 207, 207, .7);
}

.items button {
  background: #666;
  width: 80px;
  height: 26px;
  float: right;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-right: none;
  border-bottom: none;
  outline: none;
  cursor: pointer;
  border-bottom-right-radius: 20px;
  transition: background 0.2s ease-in;
}

.items button:hover {
  background: #888;

}

.desc,
.price,
.other {
  display: block;
  margin-bottom: 10px;
}