Html 创造；产品「；带有div'的表格；s

我目前正在做一些网络课程，你们会注意到我缺乏网络开发的经验。基本上，我试图创建一个表来存放商店的产品，但是我想在大部分情况下使用div-tree，如果需要的话，还可以使用文本的形式

本质上，我希望每个独立的表都包含一个图像、一个描述，以及最终使用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;
}

#内容{
宽度：600px；
填充顶部：10px；
填充底部：30px；
左边距：自动；
右边距：自动；
}
.项目{
显示：内联；
}
#项目{
填充顶部：10px；
}
#项目img{
边框：1px实心rgba（207207207.7）；
边界半径：20px；
}

div的父级是600px宽的“content”容器，每个表的宽度必须大约为193px，才能容纳一行三个“产品”，并考虑到利润

我画了一个快捷键来表示我的目标（按钮表示“添加到篮子”功能）

不幸的是，我不能使用任何框架，比如jquery来完成任务，所以我被困在艰难的工作中。为我缺乏经验提前道歉，但希望你能帮我找到正确的方向

---

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

也许这会给你指明正确的方向

HTML:

这是您提供的图像的

<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;
}

产品
描述
$100
另外
购买
描述
$100
另外
购买
描述
$100
另外
购买
#内容{
宽度：600px；
填充：10px 10px 30px 10px；
保证金：30像素自动；
文本对齐：居中；
边框：1px实心#999；
}
#项目{
填充顶部：10px；
}
.项目{
显示：内联块；
文本对齐：居中；
宽度：180px；
利润率：0.7px 0.7px；
填充顶部：10px；
边框：1px实心#999；
边界半径：20px；
}
.项目img{
宽度：160px；
高度：140像素；
边框：1px实心rgba（207207207.7）；
}
.项目按钮{
背景:#666；
宽度：80px；
高度：26px；
浮动：对；
边框顶部：1px实心#999；
左边框：1px实心#999；
边界权：无；
边框底部：无；
大纲：无；
光标：指针；
边框右下半径：20px；
过渡：背景0.2s缓进；
}
.项目按钮：悬停{
背景：#888；
}
desc先生，
价格
.其他{
显示：块；
边缘底部：10px；
}

非常感谢，我要试一试。

.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;
}

<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;
}