流体布局不流体和一个块落下

http://jsfiddle.net/TomasRR/WuNL3/1/流体布局不流体和一个块落下

代码完美的作品时，有没有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>

这是更好看小提琴......我想要什么？我想要块保持一种类型，而不是下降。

来源

2014-01-28 Tomas.R

添加vertical-align: top;到您的。左风格

来源

2014-01-28 20:15:16 Joel

谢谢乔尔：] –

流体布局不流体和一个块落下

回答

相关问题