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 替换为所需值），结合min-width和 max-width 属性来实现您想要的，同时保持您的布局。

如果您只希望内容居中，并且边框位于外部元素上，请参阅此JSFIDDLE ONE。

或者，如果您希望内容具有边框，请参阅此JSFIDDLE TWO。

希望这会有所帮助。

于 2013-06-25T18:09:25.983 回答