Question

我有3个块 - block1，block2，block3..block1＆amp; 2浮动

block3中的文本需要显示在块内，但由于某种原因它在外面显示。

CSS

html, body{
    height: 100%;
    width:100%;
}
#block1{
    height:10%;
    width:50%;
    text-align:center;
    float:left;
    background-color:red;

}

#block2{
    height:90%;
    width:50%;
    background-color:green;
    float:left;
}

#block3{
    height:90%;
    width:50%;
    background-color:yellow;

}

HTML

<div id="block1">
    Block 1
</div>
<div id="block2">
    Block 2
</div>

<div id="block3">
    Block 3
</div>

Answer 1

您需要清除块1和块2中的浮点数。尝试使用块3：

#block3{
    height:90%;
    width:50%;
    background-color:yellow;
    clear:both;
}

Answer 2

您使用花车是个问题。你看，第2块只是一次试错。它不向左浮动。检查此FIDDLE。

#block2{
    height:90%;
    width:50%;
    background-color:green;
    float:right;
}

#block3{
    height:90%;
    width:50%;
    background-color:yellow;
    float: left;    
}

希望这有帮助！

Answer 3

使用此css

      #block1 {
      height: 10%; 
      width: 50%;
      text-align: center;
      background-color: red;
      display: block;
      float: left;
     }

      #block2 {
      height: 90%; 
      width: 50%;
      text-align: center;
      background-color: green;
      display: block;
      float: left;
     }

      #block3 {
      height: 90%; 
      width: 50%;
      text-align: center;
      background-color: yellow;
      display: block;
      clear: both;
     }

Answer 4

我认为您需要重新考虑HTML才能实现这一目标。

或许更好的解决方案是将其拆分为两列，第一列中的块1和块2，第二列中的块3？

<强> HTML

<div id="col1">
  <div id="block1">
      Block 1
  </div>
  <div id="block2">
      Block 2
  </div>
</div>

<div id="col2">
  <div id="block3">
      Block 3
  </div>
</div>

<强> CSS

html, body{
  height: 100%;
  width:100%;
}

body {
  margin: 0;
}

#col1, #col2 {
  float: left;
  width: 50%;
  height: 100%;
}

#block1{
  height:10%;
  text-align:center;
  background-color:red; 
}

#block2{
  height:90%;
  background-color:green;
}

#block3{
  height:100%;
  background-color:yellow;
}

<强> Demo

Answer 5

试试这个CSS：

 html, body{
        height: 100%;
        width:100%;
    }
    #block1{
        height:10%;
        width:50%;
        text-align:center;
        float:left;
        background-color:red;

    }

    #block2{
        height:90%;
        width:50%;
        background-color:green;
        float:right;
    }

    #block3{
        height:90%;
        width:50%;
        background-color:yellow;
        float: left;

    }

    .clear {
        clear: both;
        content: ' ';
        *zoom: 1;
    }
    }

HTML中的

：

<div id="block1">
    Block 1
</div>
<div id="block2">
    Block 2
</div>
<div id="block3">
    Block 3
</div>
<div class="clear"></div>

这是因为“block3”浮动而不是在一个位置，而其他框在左边被调用（包括box2 [它应该是浮动：右边]）。我已修复并添加了一个调试类（清除）。

Jsfiddle：Demostration 希望它有所帮助！

块内的文本显示不正确

5 个答案: