在正確的位置CSS定位圖像

-2

#cake1 { 
 
    float: left; 
 
} 
 

 
#cake2 { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<img id="cake1" src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/recipe-collections/collection-image/2013/05/rosewater-raspberry-sponge-cake.jpg?itok=OVpUSQm9" /> 
 

 
<h2>Cake</h2> 
 

 
<img id="cake2" src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/chocolate-avocado-cake.jpg?itok=E2eWE_Dx" />

我想，而不是顯示在右面獲得cake2使用CSS下cake1出現，圖片。

來源

2017-07-25 Lewy Willy

卸下浮動。 – Turnip

「蛋糕」一詞應該出現在哪裏？ – j08691

我剛剛刪除了float:left;

<html> 
 

 

 
<head> 
 

 
\t <style> 
 
\t 
 
\t 
 
\t #cake2{ 
 
\t \t width: 200px; 
 
\t \t height: 200px; 
 
\t \t 
 
\t } 
 
\t 
 
\t </style> 
 

 
</head> 
 

 
<body> 
 

 
\t <img id="cake1" src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/recipe-collections/collection-image/2013/05/rosewater-raspberry-sponge-cake.jpg?itok=OVpUSQm9" /> 
 

 
\t 
 
\t <h2>Cake</h2> 
 
\t 
 
\t <img id="cake2" src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/chocolate-avocado-cake.jpg?itok=E2eWE_Dx" /> 
 
    
 

 
</body> 
 

 
</html>

來源

2017-07-25 15:23:55

如果你想單詞「蛋糕」保持第一圖像的右側，並有低於他們的第二圖像，嘗試清除第一個圖像上的浮動，然後還浮第二：

#cake1 { 
 
    float: left; 
 
} 
 

 
#cake2 { 
 
    width: 200px; 
 
    height: 200px; 
 
    clear:left; 
 
    float:left; 
 
}

<img id="cake1" src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/recipe-collections/collection-image/2013/05/rosewater-raspberry-sponge-cake.jpg?itok=OVpUSQm9" /> 
 

 
<h2>Cake</h2> 
 

 
<img id="cake2" src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/chocolate-avocado-cake.jpg?itok=E2eWE_Dx" />

來源

2017-07-25 15:28:24 j08691

是的，感謝這似乎工作。那麼清楚：左代碼忽略所有其他浮動樣式？ –

清除浮動圖像意味着被清除的元素（第二張圖像）不能坐在浮動圖像旁邊並強制它下面。請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/clear – j08691

在正確的位置CSS定位圖像

回答

相關問題