Question

我有一个页面，我有一个div，它定义了一个空间，我有一个特定的颜色渐变显示。为了确保我的图像和文字显示出来，显然他们必须在div中。但是我有2个图像，无论我给出多少填充，另一个图像仍然与它保持一致。

<!-- background gradient and setting up the display field -->
<div style="width: 320px; height: 480px; background: linear-gradient(#2F6DBA, #97E8DF)">
  <h1 style="font-family: 'AR BONNIE'; font-size: 60px; color: ffffff; padding-top: 50px; text-align: center">
			test
		</h1>
  <a style="text-decoration: none" class="imageLink" href="link1.htm">
    <!-- first img -->

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Topeka-leaderboard.svg/120px-Topeka-leaderboard.svg.png" style="width: 90px; height: 90px" />

  </a>
  <a style="text-decoration: none" class="imageLink" href="link2.htm">
    <!-- img2 -->
    <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/128/play-icon.png" style="width: 100px; height: 100px; padding-top: 60px" />
  </a>
</div>

Answer 1

这是你要找的那种格式吗？

a {
  display: block;
}

<!-- background gradient and setting up the display field -->
<div style="width: 320px; height: 480px; background: linear-gradient(#2F6DBA, #97E8DF)">
  <h1 style="font-family: 'AR BONNIE'; font-size: 60px; color: ffffff; padding-top: 50px; text-align: center">
			test
		</h1>
  <a style="text-decoration: none" class="imageLink" href="link1.htm">
    <!-- first img -->

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Topeka-leaderboard.svg/120px-Topeka-leaderboard.svg.png" style="width: 90px; height: 90px" />

  </a>
  <a style="text-decoration: none" class="imageLink" href="link2.htm">
    <!-- img2 -->
    <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/128/play-icon.png" style="width: 100px; height: 100px; padding-top: 60px" />
  </a>
</div>

Answer 2

其实我对你想要达到的目标感到困惑，所以我在这里放了两个例子 - 第一个GIST

＆＃13;

    
    <div style="width: 320px; height: 480px; background: linear-gradient(#2F6DBA, #97E8DF)">
  <h1 style="font-family: 'AR BONNIE'; font-size: 60px; color: ffffff; padding-top: 50px; text-align: center">
        test
    </h1>
  <a style="text-decoration: none" class="imageLink" href="link1.html">
    <!-- first img -->

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Topeka-leaderboard.svg/120px-Topeka-leaderboard.svg.png" style="width: 90px; height: 90px; margin:0 auto;display:block;" />

  </a>
  <a style="text-decoration: none" class="imageLink" href="link2.htm">
    <!-- img2 -->
    <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/128/play-icon.png" style="width: 100px; height: 100px; padding-top: 60px; margin:0 auto;display:block;" />
  </a>
</div>

＆＃13;

第二个LiveOnFiddle

＆＃13;

<div style="width: 320px; height: 480px; background: linear-gradient(#2F6DBA, #97E8DF)">
  <h1 style="font-family: 'AR BONNIE'; font-size: 60px; color: ffffff; padding-top: 50px; text-align: center">
        test
    </h1>
  <a style="text-decoration: none" class="imageLink" href="link1.htm">
    <!-- first img -->

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Topeka-leaderboard.svg/120px-Topeka-leaderboard.svg.png" style="width: 90px; height: 90px;" />

  </a>
  <a style="text-decoration: none" class="imageLink" href="link2.htm">
    <!-- img2 -->
    <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/128/play-icon.png" style="width: 100px; height: 100px;  float:right;" />
  </a>
</div>

＆＃13;

2 img在同一个div不会分开

2 个答案: