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宽，以适应考虑边距的三个“产品”。

我画了一个快速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/

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

用div创建“产品”表

2 个答案: