gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:17:03 25 4
gpt4 key购买 nike

我一直在尝试从 Jon Duckett 的书中学习 CSS。我正在学习定位和 float 的概念。当我尝试实现它们时,

<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% 缩放时效果很好,但当我放大时,右边的文本与左边的文本重叠。我该如何克服它?

最佳答案

这是因为 div#cont_2absolute 位置

The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

   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

关于html - 文本在最大化或较小的屏幕上重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17193758/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com