Question

当div中没有p和h时，代码可以正常工作。一旦我把一些文字放在一边就会出错。

<div class="cont">

      <div class="left">

      </div>

      <div class="right">

      </div>  

</div> <!-- .cont -->

css

body {
    width:100%;
    margin:0;
    padding:0;
}

.cont {
    white-space:nowrap;                              
    width:100%;
}

.left {
    border:1px solid red;
    width:50%;
    height:200px;
    display: inline-block;

}

.right {                             
    border:1px solid black;
    width:50%;
    height:200px;

    display: inline-block;
}


@media only screen and (max-width: 800px) {
    .left, .right {
      width: 400px;
    }
}

当文本添加了p和h时，html看起来像那样

<div class="cont">

      <div class="left">
        <h1>Programming and fuss</h1>
          <h2><em>by Tomas R. </em></h2>
  <p>MY TOP 3 PAGES:</p>
          <a href="http://www.twitter.com/" target="_blank" title="it is twitter" />TWITTER</a>

          <a href="http://www.wikipedia.org" target="_blank">WIKIPEDIA</a>
          <a href="http://www.vice.com" target="_blank">VICE</a>
      </div>

      <div class="right">
              <p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p    
      </div>

最好还是看小提琴...我想要什么？我希望块保持一行，而不是下降。

Answer 1

将vertical-align: top;添加到.left风格

流体布局不流畅，一个块下降

1 个答案: