开发者

Vertical, right and bottom alignment; cross-browser

Sorry if I can't e开发者_C百科xplain with code, I'm newbie with CSS. How can I do this?:

Vertical, right and bottom alignment; cross-browser

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>

Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?


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;
}

I've added outline for you to make divs visible. You may delete them.


Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?

If you want to align elements in page, try this:

/* 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;
}

Page bottom alignment is not possible...i guess. Put you can use margin-top css property to do the trick.

Hope it helps.


After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:

<!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>

By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.

You can check the result here. (Thanks to ted)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜