0

我想知道这段代码有什么问题？

<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

我现在已经反复阅读了几次，找不到任何问题，但不知道为什么会这样。

谁能解释它为什么这样做以及如何纠正它？

提前非常感谢！

4

2 回答 2

1

clear: right;后面加一个float:right;

现场演示http://dabblet.com/gist/3135429

你的.recipe .intro和你的.recipe ol都向右浮动。

.recipe .intro是 HTML 中的第一个，所以它是右边的第一个。除非您清除浮动，.recipe ol否则不会在 下方.recipe .intro，而是在其左侧（因为它尽可能向右）。

如果你想让整个事情接近于h2，你可以考虑对 CSS 做更多的改变：

  • 首先，给 一个固定值width，h2比如说 400px；你也可以设置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-18T10:20:02.200 回答
0

试试这个：

添加

<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-18T10:42:13.280 回答