Question

我有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>

谢谢，

Answer 1

我相信您希望在样式规则中添加margin: *some distance in em, px, or %*或padding: *some distance in em, px, or %*，具体取决于您希望相对于CSS框发生该空间的位置。

Answer 2

使用margin无济于事，但您可以在具有padding-right和padding-left的div中添加一些容器（另一个div）。

Answer 3

我努力尝试制作你所要求的东西：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>

如何在左列和中间的文本之间创建一个空格

3 个答案: