Fiddle

Question

基本上我正在制作一个网站时，我注意到当我调整窗口大小时，右侧的填充和文本位被推离屏幕

它是怎样的：http://i.imgur.com/G65bTm6.png它应该如何：http://i.imgur.com/q9a3ssK.png

HTML：

<div id="l-ContentContainer">
    <div class="content content-divider">
        <h2>Article 1</h2>
        <p>Lorem ipsum dolor sit amet...</p>

        <p>Integer laoreet diam eu interdum ornare...</p>

        <p>Pellentesque varius neque sed fermentum consectetur...</p>
    </div>
</div>

的CSS：

.content {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    padding-top: 0px;
    overflow: hidden;
    position: relative;
}

有什么方法可以解决这个问题？提前谢谢。

Answer 1

您的div content取宽度，因为您已将宽度指定为100％。尝试使用box-sizing来content div

.content {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box;
}

Fiddle

Answer 2

试试这个div！

box-sizing:border-box;

Answer 3

首先重新考虑实施中的100％宽度和最大宽度。然后对段落标记应用10px填充而不是内容。如果不是，请尝试使用reset.css。您可以更好地设计此结构。

.content {
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    padding-top: 0px;
    overflow: hidden;
    position: relative;
}

p {
    padding:10px
}

Answer 4

你的div已经填充了容器div的整个宽度，所以只需删除width: 100%部分即可。由于您已经设置了最大宽度1000px，因此不会损坏您的显示器。

在设置尺寸后，为元素添加填充会增加其尺寸，因此div宽度实际为100％+ 20px。

右侧的填充在窗口调整大小时关闭屏幕

4 个答案:

Fiddle