html - 在使用 <Div> 创建响应式移动 CSS 时需要帮助

Question

我正在处理两行和四列。每个 div 包含图像、品牌名称和价格。

行显示正确但未居中，调整窗口大小时，div 应与屏幕尺寸对齐，这意味着它应根据屏幕尺寸从 4 列变为 2 列再变为 1 列。

我想完成两件事:

1. 将页面上的两行居中，使其位于中间。

2. 确保其响应； iphone 6 和 5 优先，其次 通过平板电脑和机器人。

请帮我完成这个任务。

我具备 CSS 的应用知识，但尚未完全掌握响应式设计。

我的样式表是这样的:

.row, .row2 {
margin-left: auto;
margin-right: auto;
}

.col-1-4 {
    width: 260px;
    height: 400px;
display: table-cell;
}

这是 html:

<div class="row”>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

</div>

<div class="row2”>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

</div>

我根本不明白我做错了什么？

Answer 1

你正在尝试重新发明轮子...... Bootstrap/Foundation/PureCSS 允许你更精确地完成它