Question

很抱歉，如果我无法用代码解释，我是CSS的新手。我怎么能这样做？：

enter image description here

HTML code：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS DIV issue</title>
</head>
<body>
  <div id="div1">
    <img src="image-800x216.gif" />
  </div>
  <div id="div2">
    <img src="image-567x43.gif" />
  </div>
</body>
</html>

旨在与IE（全部），Opera，Safari，Chrome和FF一起使用。可能还是我是梦想家？

Answer 1

http://jsfiddle.net/XTkA2/30/

#div1 {
    position: absolute;
    top: 38%;
    right: 1em;
    width: 62%;
    max-width: 50em;
    outline:#999 solid 1px;
}

#div2 {
    position: absolute;
    bottom: 0.63em;
    right: 1em;
    width: 46%;
    max-width: 35.44em;
    outline:#999 solid 1px;
}

我已为您添加outline以使div可见。你可以删除它们。

Answer 2

嗯......我不明白你的意图是什么......但是......你想要在页面中心对齐两张图片，一张在另一张图片上，或者在另一张图片旁边或者两张图片在右下角对齐吗？

如果您想在页面中对齐元素，请尝试以下操作：

/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
  float: left;
  margin: 0 auto;
}

/* One images at right, another at left */
div.div1
{
  float: left;
}

div.div2
{
  float: right;
}

页面底部对齐是不可能的...我猜。你可以使用margin-top css属性来实现这一目的。

希望它有所帮助。

Answer 3

应用并混合您所有有用的答案和阅读时间和小时后，尝试来自不同网站的css / html代码......我有我想要的东西;好吧，由于浏览器兼容性，差不多95％。这是代码：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS DIVs alignment issue</title>
  <style type="text/css">
    #div1 {
      width:62%;
      min-width:16em;
      max-width:50em;
      right:1em;
      top:38%;
      margin-right:1em;
      height:auto;
      z-index:0;
      position:absolute;
    }
    #div2 {
      width:46%;
      min-width:10em;
      max-width:35.44em;
      right:1em;
      bottom:6%;
      margin-right:1em;
      height:auto;
      z-index:0;
      position:absolute;
    }
    .stretch {
      width:100%;
      height:auto;
      min-width:10em;
    }
  </style>
</head>
<body>
  <div id="div1">
    <img src="http://placekitten.com/800/216" class="stretch" />
  </div>
  <div id="div2">
    <img src="http://placekitten.com/567/43" class="stretch" />
  </div>
</body>
</html>

顺便说一下，虽然我更喜欢placehold.it到placekitten.com，但我使用的是最后一个，因为图片必须调整大小，而屏幕也是如此。

您可以查看结果here。（感谢ted）

垂直，右和底对齐;跨浏览器

3 个答案: