Question

我一直试图从Jon Duckett的书中学习CSS。我正在学习定位和花车的概念。当我试图实现它们时，

<head>
    <title>Try</title>
    <style type="text/css">
        div#container {
            width: 400px;
            height: 400px;
            padding: 5px;
        }

        div#cont_2 {
            width: 800px;
            padding: 0px 5px;
            right: 7%;
            position: absolute;
            top: 10px;
        }

        p {
            width: 300px;
        }

        p#right {
            float: right;
        }

        p#clear {
            clear: right;
        }

        p#cont_2_p {
            width: 700px;
        }

    </style>
</head>
<body>
    <div id="container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis aliquam nihil quas soluta nemo ad magnam animi! Veritatis, magnam, vero, pariatur ducimus quibusdam ad sint nostrum architecto natus asperiores odio eum doloremque excepturi expedita veniam tenetur esse sapiente est unde molestiae error et dignissimos dolorem? Rem quas eius nesciunt repellat assumenda temporibus cumque aperiam.
        </p>
        <p id="right">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sint, soluta ab explicabo labore vero placeat porro fugit tempore dolore deleniti libero sit quod reprehenderit.
        </p>
        <p id="clear">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, ullam.
        </p>
    </div>
    <div id="cont_2">
        <p id="cont_2_p">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, distinctio, asperiores, maxime amet quidem doloribus repudiandae tenetur quod odio laborum at hic nemo eaque! Vero.
        </p>
        <p id="cont_2_p">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolorum, tempore, eveniet distinctio repellendus perspiciatis modi enim saepe officia voluptatem recusandae sed voluptas molestias itaque eius ex reiciendis voluptatum consequuntur architecto molestiae quos esse eaque minima minus velit dolore in voluptate qui vel sequi provident?
        </p>
    </div>
</body>

或者：http://jsfiddle.net/7qYYT/

它在浏览器上100％缩放时效果很好但是当我放大时，右侧的文本与左侧的文本重叠。我该如何克服它？

Answer 1

这是因为absolute

的位置div#cont_2

绝对定位的元素相对于最近的定位祖先定位。如果定位的祖先不存在，则使用初始容器。

   div#cont_2 {
     width: 600px;
     padding: 0px 5px;
     float: right;
     right: 7%;
     /*position:absolute;*/
     top: 10px;
    }

在这里你设置了top:10px，它将这个div的顶部设置为父元素的10px。这使得其他内容重叠。

当然，请在css中使用class代替id选择器。如果你想重用它。由于Id选择器在标记中应该是唯一的。 Js Fiddle

Answer 2

两种可能的方法：

不是使用像素设置固定宽度，而是使用百分比设置两个容器的相对宽度：

div#container {
    width: 33.333%;
    height: 400px;
    padding: 5px;
}

div#cont_2 {
    width: calc(66.667% - 10px); // taking padding into account, but this won't work IE<=8
    padding: 0 5px;
    right: 7%;
    position: absolute;
    top: 10px;
}

使用浮动而不是定位（再次使用相对宽度）：

div#container {
    float: left;
    width: 33.333%;
    height: 400px;
    padding: 5px;
}

div#cont_2 {
    float: right;
    width: calc(66.667% - 10px);
    padding: 0 5px;
}

还有其他支持较少的方法，例如flex-box。

（顺便说一句，请勿使用0px;只需使用0。）

文本在最大化时或在较小的屏幕上重叠

2 个答案: