我们怎样才能在新行中拥有图像而在其他行中保持h2以保持h2中的所有样式 我们可以看到图像和h2都浮在一起 我们希望两者都有不同的路线 请给出适当的说明，以便所有其他程序员也参考并使用代码 问题很简单，必须使用浮动和清除属性，但不知道在哪里完美，所以请检查并尽快回复 我们已多次看到这样的问题
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="greeting"></div>#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1, h2
{
background-color: black;
color: white;}
h1{
text-align: center;
}
h2{display:inline-block;
clear: both;}
img{
clear:both;
}
答案 0 :(得分：1)
我在CSS中看不到任何float属性。 clear: both仅适用于float。您遇到的问题是由于display:inline-block;上设置了h2，因此请将其删除，所有内容都应正常运行。您不需要clear: both：
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1,
h2 {
background-color: black;
color: white;
}
h1 {
text-align: center;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id="top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol>
</article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt="handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt="dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top> <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt="back to top image" width=30></a>
</body>
</html>
答案 1 :(得分：1)
也许你只想改变
h2{display:inline-block;
clear: both;}
img{
clear:both;
}
到
img{
display:block;
}
并删除那些<br>代码？
答案 2 :(得分：1)
将width: 100%;添加到h2代码
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1, h2
{
background-color: black;
color: white;}
h1{
text-align: center;
}
h2{display:inline-block;
clear: both;
width: 100%;}
img{
clear:both;
}<!doctype html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id = "top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol></article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>
</body>
</html>