添加文本時停止向下移動div

我試圖在正方形div內放置一些文本。唯一的問題是，它將文本轉換成很大的div。有誰知道我可以如何讓div回到原來的位置？添加文本時停止向下移動div

下面是HTML：

<div id="squarecontainer"> 
    <div id="square1"> 
     <p>Easy to Manage</p> 
    </div> 
    <div id="square2"> 

    </div> 
    <div id="square3"> 

    </div> 
</div>

這裏是CSS：

#squarecontainer{ 
    text-align: center; 
} 

#square1{ 
    display: inline-block; 
    position: relative; 
    margin-right: 100px; 
    height: 310px; 
    width: 310px; 
    margin-top: 72px; 
    background-color: #fff; 
} 

#square2{ 
    display: inline-block; 
    position: relative; 
    height: 310px; 
    width: 310px; 
    margin-top: 72px; 
    background-color: #fff; 
} 

#square3{ 
    display: inline-block; 
    position: relative; 
    margin-left: 100px; 
    height: 310px; 
    width: 310px; 
    margin-top: 72px; 
    background-color: #fff; 
}

#square1是真的轉移遠了，當我添加了「易於管理」的文字股利。

來源

2013-03-05 zachstarnes

喜對不起，如果我真的不明白你的問題，你想實現你可以顯示圖片什麼或做更加易於理解。如果posible .. – jhunlio 2013-03-05 06:11:21

順便我做[小提琴]（http://jsfiddle.net/jhunlio/RgywE/），但不能弄清楚什麼問題。 – jhunlio 2013-03-05 06:14:01

我發現了下面的解決方案。添加verticle-align：top;把它移回去了。謝謝 – zachstarnes 2013-03-05 06:15:03

我找到了解決方案。通過添加vertical-align: top;它將div移回。不知道它爲什麼起作用，但它確實如此。

來源

2013-03-05 06:12:29 zachstarnes

使用word-wrap財產

div[id^="square"]{ 
    word-wrap: break-word; 
}

您可以指定與word-wrap財產無論是normal或break-word值。 Normal表示文本將擴展框的邊界。 Break-word表示文本將換行到下一行。

來源

2013-03-05 06:09:55

爲您的p標籤指定位置。問題將被解決。

#square1 p { 
     position:absolute; 
     width: 100%; 
     text-align: center; 
}

Working Fiddle

來源

2013-03-05 06:16:52

要添加到zachstarnes's answer。

問題是，vertical-align by default is set to baseline。

將元素的基線與父元素的基線對齊。這是默認的

由於其他div爲空，它們的基線默認爲div的底部。注意，如果在填寫文本時，他們都將開始向下移動，直到他們都有內容。

取決於你希望divs彼此排列如何將vertical-align屬性更改爲baseline。

vertical-align: baseline

來源

2013-03-05 06:56:23 thgaskell

添加文本時停止向下移動div

回答

相關問題