添加文本时停止向下移动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

回答

相关问题