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 としましょう。a を設定することもできますtext-align。
  • フロートしたり、またはwidthのいずれかに固定値を与えたりしないでください。代わりに、 （この場合は）の幅に等しい を与えるだけです。.recipe .intro.recipe olmargin-lefth2400px

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 に答える