漂浮在CSS

我想知道這段代碼有什麼問題？漂浮在CSS

<style type="text/css"> 

.recipe h2{ 
float:left; 
} 

.recipe .intro, 
.recipe ol{ 
float:right; 
width:500px; 
} 

</style> 
</head> 

<body> 
<h1>Recipes for Cheese</h1> 

<p class="intro">Cheese is a remarkably versatile food, available in literally hundreds of   varieties with different flavores and textures.</p> 

<div class="recipe"> 

    <h2>Welsh Rarebit</h2> 

    <p class="intro">Welsh Rarebit is a savory dish made from melted cheese, often Cheddar, on toasted bread, and a variety of other ingredients such as mustard, egg or bacon. Here is one take on this classic.</p> 

    <ol> 
    <li>Lightly toast the bread</li> 
    <li>Place a baking tray, and spread with butter.</li> 
    <li>Add the grated Cheddar cheese and 2 tablespoons of beer to a saucepan. Place the saucepan over a medium heat, and stir the cheese continuously until it has melted. Add a teaspoon of wholegrain mustard and grind in a little pepper. Keep stirring.</li> 
    <li>When thick and smooth, pour over each piece of toast spreading it to the edges to stop the toast from burning.</li> 
    <li>Place undre the grill for a couple of minutes or until golden brown.</li> 
</ol> 
</div> 

</body> 
</html>

原來，這個代碼的解決方案應該是就像書中的圖片瀏覽： https://picasaweb.google.com/lh/photo/fDg4GiRbz3mCZvh2krcsqdMTjNZETYmyPJy0liipFm0?feat=directlink

這上面的代碼給我： https://picasaweb.google.com/lh/photo/kaH-7AE5K-UKMcxxlJdkrtMTjNZETYmyPJy0liipFm0?feat=directlink

我都看了個遍現在有好幾次，並且找不到任何錯誤，但不知道爲什麼這樣做。

任何人都可以解釋爲什麼它這樣做，以及如何糾正它？

非常感謝！

來源

2012-07-18 James1

添加這裏http://dabblet.com/gist/3135429

無論您.recipe .intro和你.recipe ol都浮動到右邊clear: right;後float:right;

現場演示。

.recipe .intro是HTML中的第一個，所以它是第一個在右邊。除非你清除漂浮物，否則.recipe ol不會在.recipe .intro下，而是在左邊（因爲這是最好的）。

如果你想整個事情來接近h2，你可能會考慮到CSS的幾個變化：

首先，給一個固定的width到h2，讓我們說400像素;你也可以設置一個text-align;
不會浮動或給出固定的width到.recipe .intro或.recipe ol中的任何一個;相反，只要給他們一個margin-left，即等於h2（在這種情況下爲400px）的寬度;

CSS：

.recipe h2 { 
    float: left; 
    width: 400px; 
    text-align: center; 
} 
.recipe .intro, 
.recipe ol { 
    margin-left: 400px; 
}

演示http://dabblet.com/gist/3135529

來源

2012-07-18 10:20:02 Ana

請問爲什麼？如果我想讓整個事情接近威爾士Rarebit，我只需要添加保證金：35em？謝謝 – James1 2012-07-18 10:41:37

看到我更新的答案 – Ana 2012-07-18 10:56:37

試試這個：

添加

<div style="clear:right"></div>

後

<p class="intro">Welsh Rarebit is a savory dish made from melted cheese, often Cheddar, on toasted bread, and a variety of other ingredients such as mustard, egg or bacon. Here is one take on this classic.</p>

來源

2012-07-18 10:42:13

回答

相關問題