Question

我正在尝试创建一个由三个超链接框组成的“行”，其中包括顶部的描述性文本和下方的图像。但是由于某种原因，我创建的容器框使内容对齐，然后延伸到所需宽度的两倍左右。

将其包装成仅包含图像和文本所需的最小宽度的最佳方法是什么？另外，是什么让容器按现在的方式运行，而不是默认情况下只包装最小宽度？

我的代码可以在下面以及this jsfiddle page上找到。还请欣赏我在W3Schools.com上找到的美丽示例图片：

.smallimgbox {
  float: left;
  margin-left: auto;
  margin-right: auto;
}

.smallimgboxcontainer {
  overflow: auto;
  margin-right: auto;
  margin-left: auto;
  padding-right: auto;
  padding-left: auto;
}

.smallimgbox img {
  width: 50%;
  height: 50%;
  margin: auto;
}

<div class="smallimgboxcontainer">
  <div class="smallimgbox">
    <a href="">
      <h3>Link #1</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>

  <div class="smallimgbox">
    <a href="">
      <h3>Link #2</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>

  <div class="smallimgbox">
    <a href="">
      <h3>Link #3</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>
</div>

Answer 1

问题在于以下几行

width: 50%;
height: 50%;

表示占父母宽度的50％。由于您的父母没有定义宽度，因此会将其设置为孩子的图片全角（400px）。

您有几种选择：

1）在您的父母上定义宽度（例如300px，您的孩子的宽度将为150%并且彼此并列）。

2）定义孩子的宽度（例如200px而不是50%的宽度，孩子会彼此站在一边）。

3）删除孩子上的50%宽度，每个孩子将为full width（在图像上为400px）。

4）这就是我想要的：定义父母的全宽，并根据此设置孩子：

.smallimgboxcontainer {
    width: 100%;
}

.smallimgbox {
    float: left;
    width: 50%;
    height: 50%;
 }

Answer 2

如果我正确理解了您的问题，您希望将行分为3个框，其中图像和文本位于每个框的中央。目前，对于您的代码，每个smallimgbox默认为包含的img的宽度。然后，将图像调整为其容器框的50％。

要将行分为3个部分（使用浮点数），您需要通过以下方式为每个部分指定宽度：

.smallimgbox {
    width: 33.3%:
}

如果要使图像占容器的50％并居中，则必须设置margin: 0 auto并确保将img显示为块：

.smallimgbox img {
   display: block;
   margin: 0 auto;
}

目前，您只缺少以下文字：

.smallimgbox {
   text-align: center;
}

我更新了jsFiddle。

超链接图像容器太宽

2 个答案: