图像作为在 flexbox 中布局的链接

Posted 2023-03-06

【中文标题】图像作为在 flexbox 中布局的链接

【英文标题】：Image as a link laid out in flexbox

【发布时间】：2020-10-31 13:19:36

【问题描述】：

我正在尝试使用 flexbox 实现链接和布局的图像。

我的图片在不是链接时看起来很棒：

html：

<div class="flexbox">
        <img class="image1" src="img/image1.png" >
        <img class="image2" src="img/image2.png" >

CSS：

.flexbox 
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0; 

但是，当我制作图片链接时，我失去了 flexbox 布局的所有好处：

HTML：

<div class="flexbox">
        <a href="sunrise.html">
<img class="image1" src="img/image1.png" >
</a>
        <a href=”sunset.html”>
<img class="image2" src="img/image2.png" >
</a>
    </div>

我做错了什么？

谢谢！

【问题讨论】：

你遇到了什么问题？

我失去了“间隔”功能，我的图像失去了它们的类格式:(

我在这两种情况下都得到了相同的输出。你能链接到 jsfiddle，我可以看到你得到的输出哪里出错了

在两种情况下，我在 jsfiddle 中也得到了相同的输出，但在我的实际代码中却没有。不用担心，Abhishek - 我会更仔细地查看我的实际代码，因为 jsfiddle 表明我遗漏了一些明显的东西。

您也可以查看以下答案。我尝试了所有的 flex-properties，每个都得到了预期的结果

【参考方案1】：

我可以看到代码在这两种情况下都有效。您可以在下面看到我有 2 行图像，并且在每一行中，flex-box 都按预期工作。

.flexbox 
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;


.separator 
  height: 10px;
  margin: 30px;
  background-color: brown;

<div class="flexbox">
  <a href=”sunset.html”><img class="image1" height='150px' src="https://www.w3schools.com/html/pic_trulli.jpg" >
    <a>
      <a href="/"><img class="image2"  src="https://www.w3schools.com/html/pic_trulli.jpg" ></a>
</div>

<div class="separator"></div>

<div class="flexbox">
  <img class="image1" src="https://www.w3schools.com/html/pic_trulli.jpg"  >
  <img class="image2" src="https://www.w3schools.com/html/pic_trulli.jpg"  >
</div>

【参考方案2】：

由于这个问题已经有一年多了，我想这个问题已经解决了。但是，我只是遇到了完全相同的问题并为自己解决了问题，所以我认为这对某些人来说可能会派上用场（请多多包涵，因为我是 HTML/CSS 新手）：

我建立了一个小型画廊网站，我想将主页上的图像链接到子页面。但是，当我将<a href>-标签添加到我的图像时，格式将无处不在。我通过在 CSS 中为我​​的图像（以及另一个 <div>-element）和 a-tags 使用 flex-grow: 1 来解决这个问题。