垂直，右側和底部對齊;跨瀏覽器

很抱歉，如果我不能解釋的代碼，我是新手用CSS。我怎樣才能做到這一點？：垂直，右側和底部對齊;跨瀏覽器

enter image description here

HTML代碼：

<!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（全部），歌劇，Safari，Chrome和FF工作。是可能的或我是夢想家？

來源

2011-03-16 quantme

爲什麼不絕對定位？這似乎是最容易達到與圖中相同的結果。 – Artefact2 2011-03-16 18:42:58

@ Artefact2我想知道有足夠的瞭解CSS迴應吧:) – quantme 2011-03-17 01:36:19

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有形之。你可以刪除它們。

來源

2011-03-16 18:58:58 ted

對於這類事情使用'outline'屬性 - 'outline'不會影響元素的佈局，與'border'不同。哦，你可以使用http://placehold.it佔位符圖像 – 2011-03-16 19:00:37

@Yi姜更好：http://placekitten.com/ – 2011-03-16 19:07:57

@Yi江，感謝建議：。 – ted 2011-03-16 19:45:27

嗯......我不明白什麼是你的本意......但你要對齊兩個圖像，一個在另一個頁面中心或彼此旁或右下角兩個圖像？

如果要對齊頁面元素，試試這個：

/* 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屬性來做伎倆。

希望它有幫助。

來源

2011-03-16 18:37:40 marcoaoteixeira

哦...它會爲大多數的瀏覽器工作...（IE5也許） – marcoaoteixeira 2011-03-16 18:38:23

很好的回答，雖然如我所料你的代碼不能正常工作，它幫助我瞭解了一些關於對齊和浮動屬性的奇怪事情。 – quantme 2011-03-17 01:58:55

應用和混合你所有有用的答案和小時和小時的閱讀和嘗試不同網站的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）

來源

2011-03-17 02:19:34 quantme

垂直，右側和底部對齊;跨瀏覽器

回答

相關問題