0

コンテンツの左右に均等な空きスペースを確保しようとしています。justify を使用してみましたが、異なる長さのコンテンツで問題が発生しています。

質問: コンテンツの長さに関係なく、コンテンツの左右に均等な量の空きスペースを追加するにはどうすればよいですか? コンテンツの左側に 15px のパディングを必ず追加する必要があります。

コードを参照してください:

<div class="pop">
    Over the weekend, I went to a sunset picnic on a rooftop in Brooklyn. 
    The evening couldn’t have been more picturesque — a group of stylish women
    chatting and lounging on blankets, framed against a lavender and glittering
    cityscape.
</div>

<div class="pop">
    This is just one sentence as an example.
</div>

CSS:

.pop {
    border: 1px solid #999;
    margin-top: 10px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: justify;
    padding-right: 15px;
}

http://jsfiddle.net/dbGeX/

アップデート：

コンテンツが中央に表示されないようにしたいのですが、左側と右側に同じ量のパディングがあるように見えるはずです。したがって、左側には padding-left: 15px; が必要です。右側のコンテンツは、左側のコンテンツと同じ量の空白になるように調整する必要があります。これがより明確になることを願っています。

4

2 に答える 2

1

私はここであなたの意図について知識に基づいた推測をしていますが、おそらくdisplay:inline-block".pop" のスタイリングに使用したいと思うかもしれません.

これがあなたが欲しいと私が考えているものです。ここでは、コンテナに含まれるコンテンツの長さに関係なく、コンテナの両側に等しいパディングがあります。

あなたが達成しようとしていることについて私が間違っている場合は、お知らせください。さらにお手伝いさせていただきます。

于 2013-06-25T21:04:28.637 に答える
1

width:80%;(80 を目的の値に置き換えます) と max-width` プロパティを組み合わせて使用min-width​​し、レイアウトを維持しながら、必要なものを実現できます。

コンテンツだけを中央に配置し、境界線を外側の要素に配置する場合は、このJSFIDDLE ONEを参照してください。

または、コンテンツに境界線を付けたい場合は、このJSFIDDLE TWOを参照してください。

これが少しでも役に立てば幸いです。

于 2013-06-25T18:09:25.983 に答える