8

正方形の 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「管理が簡単」というテキストを追加したときに、本当に下に移動する div です。

4

6 に答える 6

17

解決策を見つけました。追加するvertical-align: top;と、divが元に戻りました。なぜそれが機能したのかわかりませんが、機能しました。

于 2013-03-05T06:12:29.447 に答える
13

zachstarnes's answerに追加します。

問題は、vertical-alignデフォルトで が に設定されてbaselineいることです。

要素のベースラインを親要素のベースラインに揃えます。これがデフォルトです

他の div は空であるため、ベースラインはデフォルトで div の下部になります。テキストを入力すると、すべてのコンテンツが含まれるまですべてが下に移動し始めることに注意してください。

div をどのように並べるかによって、vertical-alignプロパティを別のものに変更しますbaseline。

vertical-align: ベースライン

于 2013-03-05T06:56:23.673 に答える
3

pタグに位置を付けます。問題は解決されます。

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

ワーキングフィドル

于 2013-03-05T06:16:52.497 に答える
1

word-wrapプロパティを使用する

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

normalプロパティでまたはbreak-word値のいずれかを指定できますword-wrap。Normalテキストがボックスの境界を拡張することを意味します。Break-wordテキストが次の行に折り返されることを意味します。

于 2013-03-05T06:09:55.333 に答える