1

2 つの列 (左と右) があり、これらの列は垂直で、画像とテキストとリンクがあります。ページの中央、左の列、右の列にテキストを配置したいのですが、中央には列がありませんが、テキストを貼り付けると配置の問題が発生します。しかし、テキストウィッチを中央に配置したくない場合を除き、テキストは左の列の画像またはボーダーに触れています。

左の列の要素とページの中央のテキストの間にスペースを作成して、適切に配置できるようにするにはどうすればよいですか?

<div style="position: relative; float: right; text-align: center;">
      <!-- Images in a vertical line here-->
</div>

<div style="position: relative; float: left; padding-right: 1px; text-align: center;">
      <!-- Images in a vertical line here-->
</div>

ありがとうございました、

4

3 に答える 3

1

CSSボックスに対してそのスペースをどこに配置したいかによって、スタイルルールに追加margin: *some distance in em, px, or %*または追加しようとしていると思います。padding: *some distance in em, px, or %*

于 2013-07-29T17:52:05.907 に答える
0

を使用しmarginてもあまり役に立ちませんが、padding-rightとを持つ div にコンテナー (別の div) を配置できpadding-leftます。

于 2013-07-29T17:53:05.387 に答える
0

私はあなたが要求したものを試してみるためにフィドルを作りました: http://jsfiddle.net/MEA8W/

CSS:

.column {
    float: left;
    text-align: justify;
    width: 50%;
}

.column p {
    padding: 10px
}

HTML:

<div class="column">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec vestibulum mi, eu mollis nibh. Vestibulum euismod, orci ut porttitor dictum, velit dolor sodales leo, at iaculis metus leo malesuada mi. In non fermentum nulla. Vivamus in dapibus dui. Nulla quis mi commodo, tincidunt eros gravida, rutrum nibh. Vestibulum ac arcu vulputate, tincidunt ante id, molestie massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </p>
</div>

<div class="column">
    <p>
        Quisque aliquam ultricies varius. Phasellus viverra congue massa, et fringilla sapien. Quisque quis tristique nisi, sit amet rhoncus nulla. Nulla bibendum mauris pretium dui faucibus rhoncus. Praesent nec mauris ac enim auctor rhoncus a ultrices nisl. Nulla commodo lorem vel eleifend semper. Etiam ac sapien iaculis lacus interdum sodales. Maecenas sed turpis sapien. Vestibulum faucibus ipsum vitae hendrerit egestas. Phasellus cursus congue tempus. Nulla facilisi. Donec vestibulum posuere est, ut fringilla nunc congue sit amet. Aenean et ultricies quam. 
    </p>
</div>
于 2013-07-29T17:56:34.633 に答える