Question

我有以下HTML：

#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" />

我正在尝试使用CSS将cake2放在cake1下面，而不是显示在图像的右侧。

Answer 1

我刚删除float:left;

<html>


<head>

	<style>
	
	
	#cake2{
		width: 200px;
		height: 200px;
		
	}
	
	</style>

</head>

<body>

	<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" />
 

</body>

</html>

Answer 2

如果你想保留＆＃34; Cake＆＃34;在第一个图像的右边，并在它们下面有第二个图像，尝试清除第一个图像上的浮动，然后浮动第二个图像：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

CSS将图像定位在正确的位置

2 个答案: