Остановить 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

привет извините, если я не получить то, что ваша проблема и то, что вы хотите достичь вы можете показать изображение или что сделать более легким для понимания. если возможно .. – jhunlio

кстати я сделал [скрипка] (http://jsfiddle.net/jhunlio/RgywE/), но не могу понять, в чем проблема. – jhunlio

Я нашел решение ниже. добавление verticle-align: top; переместил его обратно. благодаря – zachstarnes

Я нашел решение. Добавив vertical-align: top;, он переместил div назад. не знаю, почему это сработало, но так оно и было.

источник

2013-03-05 06:12:29 zachstarnes

использование word-wrap свойство

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

Вы можете указать либо normal или break-word значение с word-wrap собственности. 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

Going добавить к zachstarnes's answer.

Проблема в том, что vertical-align by default is set to baseline.

Выровняйте базовую линию элемента с базовой линией родительского элемента. Это значение по умолчанию

Поскольку другие divs пусты, их базовая линия по умолчанию находится в нижней части div. Обратите внимание, что при заполнении текста все они начнут перемещаться вниз до тех пор, пока все они не будут содержать контент.

В зависимости от того, как вы хотите, чтобы divs согласовывались друг с другом, измените свойство vertical-align на что-то другое baseline.

vertical-align: baseline

источник

2013-03-05 06:56:23 thgaskell

Остановить div от смещения вниз при добавлении текста

ответ

Смежные вопросы