时间戳

首页 > 解决方案 > 为什么我添加的其中一张图片没有对齐？

html - 为什么我添加的其中一张图片没有对齐？

问题描述

我想在我正在处理的网站上添加一些按钮，每个按钮都可以将您带到另一个页面。我只是使用图像并向它们添加了一个超链接，并使用浮动对齐它们。我认为可能是文本，但我不确定，因为我对使用 HTML 和 CSS 还很陌生。结果是这样的：但结果是这样 的：左边的最后一个按钮未对齐

我的 HTML 类型在这里：

* {
  box-sizing: border-box;
}

body {
  background: url('realheckindoggopupper.png')
}

div {
  padding: 5px;
  background-color: black;
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 1px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
<div>

  <body style="background-color:black">
    <h1 style="color:blue;text-size:50px;">Welcome to the Mamiya Mansion!</h1>
    <p style="color:white;">
      This is a place where I put all my thoughts. I talk about all my different interests here, from retrogaming, to retro-anime, linguistics, and philosophy. I don't have much here yet, more is on the way (including better CSS!), <br> but these buttons
      will allow you to access different parts I'm working on. </br>
    </p>
</div>
<div class="row">
  <div class="column">
    <a href="retrostuff.html">
      <img src="retrostuff.png" style="width:100%;">
    </a>
  </div>
  <div class="column">
    <a href="creations.html">
      <img src="creations.png" style="width:100%;">
    </a>
  </div>
  <div class="column">
    <a href="pseudstuff.html">
      <img src="pseudstuff.png" style="width:100%;">
    </a>
    <div class="column">
      <a href="misc.html">
        <img src="misc.png" style="width:200%;">
      </a>
    </div>
  </div>

标签： htmlcss

解决方案

正如 Guy Incognito 在评论中指出的那样，您的最终 div 嵌套在前一个 div 中。试试这个：

<div class="row">
  <div class="column">
    <a href="retrostuff.html">
      <img src="retrostuff.png" style="width:100%;">
    </a>
  </div>
  <div class="column">
    <a href="creations.html">
      <img src="creations.png" style="width:100%;">
    </a>
  </div>
  <div class="column">
    <a href="pseudstuff.html">
      <img src="pseudstuff.png" style="width:100%;">
    </a>
  </div>
  <div class="column">
    <a href="misc.html">
      <img src="misc.png" style="width:100%;">
    </a>
  </div>
</div>

推荐阅读