添加文本時Div位置發生變化

Question

我正在嘗試使用div來製作三個部分。

這裏是什麼，我現在有一個形象：

當我添加文本到中間的div，在div下移是這樣的：

HTML：

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="middle">sometext</div> 
    <div id="right"></div> 
</div> 

CSS：

#left{ 
    width: 610px; 
    height: 1065px; 
    background-color: #ececec; 
    border: 1px solid #636363; 
    margin: 7px 0px 0px 15px; 
    display: inline-block; 
} 

#middle{ 
    width: 625px; 
    height: 1065px; 
    background-color: #ececec; 
    border: 1px solid #636363; 
    margin: 7px 0px 0px 15px; 
    display: inline-block; 
} 

#right{ 
    width: 610px; 
    height: 1065px; 
    background-color: #ececec; 
    border: 1px solid #636363; 
    margin: 7px 0px 0px 15px; 
    display: inline-block; 
} 

Answer 1

將overflow: hidden;設置爲您的div。

例子：

#middle { 
    overflow: hidden; 
    width: 625px; 
    height: 1065px; 
    background-color: #ececec; 
    border: 1px solid #636363; 
    margin: 7px 0px 0px 15px; 
    display: inline-block; 
} 

您還可以，如果你想對容器進行滾動如果文本到達底部設置爲overflow: auto。

另一種更常見的方法是使用CSS的float。

然後，您可以風格你div的是這樣的：

div { 
    float: left; 
    width: 625px; 
    height: 1065px; 
    background-color: #ececec; 
    border: 1px solid #636363; 
    margin: 7px 0px 0px 15px; 
} 

和HTML：

<div>Content</div> 
<div>Content</div> 
<div>Content</div> 

看到一個例子fiddle here。