Fatal编程技术网
  • css/
  • 在CSS中浮动

在CSS中浮动

css

在CSS中浮动,css,css-float,Css,Css Float,我想知道这个代码怎么了 <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 rema

我想知道这个代码怎么了

<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>


.配方h2{
浮动：左；
}
.食谱.介绍，
.食谱{
浮动：对；
宽度：500px；
}
奶酪配方

奶酪是一种用途广泛的食品，有上百种不同口味和质地的品种可供选择

威尔士腊肠
威尔士稀饭是一道美味佳肴，由融化的奶酪（通常是切达干酪）和烤面包以及芥末、鸡蛋或培根等多种其他配料制成。这是对这部经典作品的一种解读


  • 轻轻地烤面包
    • 

  • 放一个烤盘，涂上黄油
    • 

  • 在平底锅中加入磨碎的切达干酪和2汤匙啤酒。把平底锅放在中火上，不断搅拌奶酪直到它融化。加入一茶匙全麦芥末，并加入少许胡椒粉。继续搅拌
    • 

  • 当面包片又厚又光滑时，把它倒在每片面包片上，把面包片摊到边缘，防止烤面包片烧焦
    • 

  • 放在烤架上烤几分钟或直到金黄
    •
    最初，此代码的解决方案应该与本书中的图片一样：

    上面的代码告诉我：

    我已经读了好几遍了，没有发现任何错误，但不知道为什么会这样

    有人能解释一下为什么会这样，以及如何纠正它吗

    非常感谢

    添加一个
    清除：右后<代码>浮动：右
    
现场演示
    

    
您的
    .recipe.intro
    和
    .recipe ol
    都浮动到右侧
    

    .recipe.intro
    是HTML中的第一个，因此它是右边的第一个。除非清除浮点数，
    .recipe ol
    将不在
    .recipe.intro
    下，而是在其左侧（即最右侧）
    

    

    如果你想让整个事情接近 H2，你可以考虑对CSS做一些修改：
    

      

    • 首先，给
      h2
      一个固定的
      宽度，比如说400px；您还可以为其设置
      文本对齐
      

    • 不要对
      .recipe.intro
      或
      .recipe ol
      中的任何一个浮动或给定固定的
      宽度
      ；相反，只需给它们一个
      左边的边距
      ，该边距等于
      h2
      的宽度（在本例中为
      400px
      ）

    
CSS:
    
演示
    试试这个：
    
加
    

    

    
之后
    
威尔士稀饭是一道美味佳肴，由融化的奶酪（通常是切达干酪）和烤面包以及芥末、鸡蛋或培根等多种其他配料制成。这是对这部经典作品的一种解读
    为什么？如果我想让整个事情接近威尔士的Rarebit，我只需要增加利润，对吗：35em？谢谢 
    .recipe h2 {
    float: left;
    width: 400px;
    text-align: center;
}
.recipe .intro, 
.recipe ol {
    margin-left: 400px;
}

    <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>