漂浮在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

回答

相关问题