1

我一直在尝试从 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% 缩放时效果很好，但是当我放大时，右侧的文本与左侧的文本重叠。我该如何克服它？

4

2 回答 2

2

是因为absolute位置div#cont_2

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

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

在这里，您已经设置top:10px了从父元素的 10px 设置此 div 的顶部。这使得其他内容重叠。

当然，请在 css 中使用class而不是选择器。id如果你想重用它。因为Id选择器在标记中应该是唯一的。 Js小提琴

于 2013-06-19T14:24:58.997 回答
0

两种可能的方法：

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

    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;
}

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

    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。）

于 2013-06-19T14:47:29.463 回答