CSSポジショニング画像

-2

私は、次のようなHTMLがあります。CSSポジショニング画像

#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を使用してcake1の下に表示されるようにcake2を取得しようとしていますが画像。

出典

2017-07-25 Lewy Willy

はfloatを削除します。 – Turnip

「ケーキ」という単語はどこに表示されるのですか？ – j08691

float:leftを削除しました。あなたが最初の画像の右側にある単語「ケーキ」を維持し、その下の第2の画像を持っているしたい場合は

<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

はい、これはうまくいくようです。だからクリア：左のコードは他のすべての浮動小数点スタイルを無視しますか？ –

フローティングイメージをクリアすると、クリアされている要素（2番目のイメージ）がフローティングイメージの隣に座って強制的にそのイメージの下に置かれないことを意味します。 https://developer.mozilla.org/en-US/docs/Web/CSS/clearを参照してください。 – j08691

答えて

関連する問題