额外的文字提升包含框

时间:2016-10-10 00:27:53

标签: html css layout css-float clearfix

这很奇怪:

  • 当只有一些文字时,.main被按下。 (原因证明here。)
  • 当有大量文字时,.wrapper { background-color: blue; display: inline-block; } .main:after { content: " "; clear: both; display: table; } .left-column { float: left; background-color: aqua; } .right-column { float: right; background-color: aqua; }的前几个单词出现在两个浮动框之间。

<div class="wrapper">
  <div class="left-column">
    L Float
  </div>
  <div class="right-column">
    R Float
  </div>
  <div class="main">
    some text
  </div>
</div>

<hr>

<div class="wrapper">
  <div class="left-column">
    L Float
  </div>
  <div class="right-column">
    R Float
  </div>
  <div class="main">
    a huge amount of text
  </div>
</div>
.main

我想知道为什么额外的文字会向上移动$("div").hover( function (e) { e.stopPropagation(); $(this).addClass('active').parents().removeClass('active'); }, function (e) { $(this).removeClass('active').parent().addClass('active'); } );

0 个答案:

没有答案