在正确的位置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定位图像

回答

相关问题