Html 每行仅显示两个图像

我有4张图片，希望每行显示2张。它们每个都有一个

宽度：50%

和一个

浮动：左

HTML

---

问题是所有图像都显示在同一行中。宽度：50%似乎不适用。我怎样才能将图像两个一个地显示，而不是将它们全部显示在同一行上

浮动无法工作，因为元素不适合一行。你设定了一个边际。元素的完整宽度为宽度+左边距+右边距。该值必须小于50%

浮动无法工作，因为元素不适合一行。你设定了一个边际。元素的完整宽度为宽度+左边距+右边距。必须小于50%

不要到处使用

float

，请尝试使用包含两行两列的HTML表

<table>
  <tr>
    <td>img1</td>
    <td>img2</td>
  </tr>
  ... etc
</table>

img1
img2
... 等

---

然后使用CSS将所有表格单元格的宽度设置为50%。

不要到处使用

float

，请尝试使用包含两行两列的HTML表格

<table>
  <tr>
    <td>img1</td>
    <td>img2</td>
  </tr>
  ... etc
</table>

img1
img2
... 等

---

然后使用CSS将所有表格单元格设置为50%宽。

您使用的是

float

以及

margin:0 auto

用以下内容替换

main

CSS

.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
 }

---

您正在使用

float

以及

margin:0 auto

将

main

css替换为以下内容：

.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
 }

---

添加了两次宽度（百分比和像素），应删除：

.clearfix{
明确：两者皆有；
}
部分{
文本对齐：居中；
}
.一些容器{
浮动：左；
宽度：50%；
位置：相对位置；
}
梅因先生{
文本对齐：居中；
边框：10px纯白；
宽度：306px；
高度：306px；
保证金：50px自动；
盒影：0px 0px 25px黑色；
溢出：隐藏；
}
.段{
-webkit转换：translateY（-300%）；
边框：5px纯灰；
背景颜色：灰色；
不透明度：0.5；
}
.main:hover.content，
.main：活动。内容{
-webkit转换：translateY（-340px）；
-webkit转换：-webkit转换700ms；
}
.内容{
宽度：306px；
高度：306px；
背景：rgba（51102255,0.5）；
}
img{
身高：继承；
宽度：继承；
-webkit转换：-webkit转换5000ms；
}
钮扣{
宽度：100%；
高度：50px；
边缘顶部：100px；
背景：黑色；
边界：0；
光标：指针；
颜色：白色；
字体：16px塔荷马；
}
按钮：悬停
{
不透明度：0.5；
}

这将是中心
诺基亚7210经典
诺基亚7210经典
诺基亚7210经典
诺基亚7210经典

如果添加了两次宽度（百分比和像素），则应删除：

.clearfix{
明确：两者皆有；
}
部分{
文本对齐：居中；
}
.一些容器{
浮动：左；
宽度：50%；
位置：相对位置；
}
梅因先生{
文本对齐：居中；
边框：10px纯白；
宽度：306px；
高度：306px；
保证金：50px自动；
盒影：0px 0px 25px黑色；
溢出：隐藏；
}
.段{
-webkit转换：translateY（-300%）；
边框：5px纯灰；
背景颜色：灰色；
不透明度：0.5；
}
.main:hover.content，
.main：活动。内容{
-webkit转换：translateY（-340px）；
-webkit转换：-webkit转换700ms；
}
.内容{
宽度：306px；
高度：306px；
背景：rgba（51102255,0.5）；
}
img{
身高：继承；
宽度：继承；
-webkit转换：-webkit转换5000ms；
}
钮扣{
宽度：100%；
高度：50px；
边缘顶部：100px；
背景：黑色；
边界：0；
光标：指针；
颜色：白色；
字体：16px塔荷马；
}
按钮：悬停
{
不透明度：0.5；
}

这将是中心
诺基亚7210经典
诺基亚7210经典
诺基亚7210经典
诺基亚7210经典

您已经添加了两次宽度，移除306px，并给盒子加上大小边框框，以确保边框是从里面取出来的看到这把小提琴了吗

---

您已经添加了两次宽度，移除306px，并给边框框加上大小框，以确保边框是从内部开始的看到这把小提琴了吗

---

您的主要问题是在

.main

的CSS规则上有两个

width

属性。您正在将

宽度设置为50%，但几行之后再次将其覆盖为
306px
：

.main{
  float:left;
  width:50%;
  // ...
  width:306px;
  // ...
}

其次，在计算50%宽度时，将不考虑应用于
.main
元素的10px边框，因此元素的宽度将比50%宽20px（2 x 10px）。要解决此问题，需要将属性值设置为“border box”：

.main {
    // ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

还有一些其他问题需要解决，但这将解决您要求的问题。我不确定你到底想问什么，所以当你遇到更多问题时，请随意创建另一个问题并链接到这里

下面是一个片段，其中包含我建议的一行显示2个图像的修复：


.clearfix{
明确：两者皆有；
}
部分{
文本对齐：居中；
}
梅因先生{
浮动：左；
宽度：50%；
文本对齐：居中；
边框：10px纯白；
高度：306px；
保证金：50px自动；
盒影：0px 0px 25px黑色；
溢出：隐藏；
-moz框大小：边框框；
框大小：边框框；
}
.段{
-webkit转换：translateY（-300%）；
边框：5px纯灰；
背景颜色：灰色；
不透明度：0.5；
}
.main:hover.content，
.main：活动。内容{
-webkit转换：translateY（-340px）；
-webkit转换：-webkit转换700ms；
}
.内容{
宽度：100%；
高度：306px；
背景：rgb
.main{
  float:left;
  width:50%;
  // ...
  width:306px;
  // ...
}

.main {
    // ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}