使用CSS定位圖像（與默認盒子/空白區域對戰）

我在頁面上有9張圖片，前6張圖片很好，但最後3張圖片太低，需要擡起來以便與中間的圖層保持一致（圖片4-6），請參閱圖片以獲得澄清。使用CSS定位圖像（與默認盒子/空白區域對戰）

http://s29.postimg.org/5jejyjgrr/tiles.jpg

的CSS：

body { 
    margin: 0px; 
    text-align: center; 
} 

header img { 
    display: inline; 
    margin-right: -5px; 
} 

nav img { 
    display: block; 
} 

div img { 
    display: block; 
    float: right; 
    clear: right; 
}

的HTML：

<!DOCTYPE html> 

<html> 

<head> 
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> 
<title>Space Shots</title> 
</head> 

<body> 
    <header> 
    <img src="/images/spaceshots/purple-space.jpg" alt="purple space" height="250" width="250"> 
    <img src="/images/spaceshots/red-space2.jpg" alt="red space 2" height="250" width="250"> 
    <img src="/images/spaceshots/blue-space3.jpg" alt="blue space3" height="250" width="250"> 
    <br><br><br><br> 
    </header> 
    <nav> 
    <img src="/images/spaceshots/purple-space3.jpg" alt="purple space 3" height="250" width="250"> 
    <img src="/images/spaceshots/red-space.jpg" alt="red space" height="250" width="250"> 
    <img src="/images/spaceshots/blue-space.jpg" alt="blue space" height="250" width="250"> 
    </nav> 
    <div> 
    <img src="/images/spaceshots/blue-space2.jpg" alt="blue space 2" height="250" width="250"> 
    <img src="/images/spaceshots/red-space3.jpg" alt="red space 3" height="250" width="250"> 
    <img src="/images/spaceshots/purple-space2.jpg" alt="purple space 2" height="250" width="250"> 
    </div> 
</body> 

<html>

來源

2014-11-02 NightSpark

對於您想創建一個佈局類型，你將需要使用float: left和float: right分別爲您的nav和div。這裏有一個演示（查看整頁）：

body { 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 
header img { 
 
    display: inline; 
 
    margin-right: -5px; 
 
} 
 
nav img { 
 
    display: block; 
 
} 
 
div img { 
 
    display: block; 
 
    float: right; 
 
    clear: right; 
 
} 
 
nav { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
div { 
 
    float: right; 
 
    overflow: hidden; 
 
}

<header> 
 
    <img src="http://placehold.it/350x150" alt="purple space" height="250" width="250"> 
 
    <img src="http://placehold.it/350x150" alt="red space 2" height="250" width="250"> 
 
    <img src="http://placehold.it/350x150" alt="blue space3" height="250" width="250"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
</header> 
 
<nav> 
 
    <img src="http://placehold.it/350x150" alt="purple space 3" height="250" width="250"> 
 
    <img src="http://placehold.it/350x150" alt="red space" height="250" width="250"> 
 
    <img src="http://placehold.it/350x150" alt="blue space" height="250" width="250"> 
 
</nav> 
 
<div> 
 
    <img src="http://placehold.it/350x150" alt="blue space 2" height="250" width="250"> 
 
    <img src="http://placehold.it/350x150" alt="red space 3" height="250" width="250"> 
 
    <img src="http://placehold.it/350x150" alt="purple space 2" height="250" width="250"> 
 
</div>

jsFiddle Demo。

來源

2014-11-02 17:53:44

對你的css做一點改動加一個float：left;以NAV

nav img { 
    display: block; 
    float:left 
}

還可以創建一個CSS的DIV

div{ 
    float:right; 
}

刷新頁面！完成！

來源

2014-11-02 18:34:58 Exp3rt

使用CSS定位圖像（與默認盒子/空白區域對戰）

回答

相關問題