我有一个HTML文档,其结构如下图所示:
使用CSS,代表旁注文本的红色块相对于文本中的脚注编号放置。如果文本有很多旁注和/或旁注的文本很长,则旁注会重叠。为了防止这种情况,我使用JavaScript设置了这些元素的上边距,以便向下移动它们。
为了防止在未启用JavaScript的情况下无法使用该网站,我想对需要在CSS文件中向下移动的元素的上边距值进行硬编码。为了考虑不同的屏幕分辨率,我想到了使用CSS @media
-query为其他屏幕分辨率设置不同的顶部边距。
例:
@media(min-width: 80em) {
.container { width: 40em; }
#sidenote-45 { margin-top: 15px; }
[...]
}
@media(min-width: 60em) {
.container { width: 30em; }
#sidenote-56 { margin-top: 28px; }
#sidenote-89 { margin-top: 12px; }
[...]
}
[maybe more @media-queries for other screen sizes]
您如何看待这种方法?
最佳答案
您可以使用相对于容器的绝对位置将注释放在div
的左侧或右侧,如果未设置top
属性,则框将保持与数字对齐的位置。像这样:
.container {
border: solid 2px black;
background: white;
width: 30%;
margin: 20px auto;
position: relative;
}
sup {
color: red;
}
.notes {
position: absolute;
left: -220px;
color: black;
display: block;
background: #8ac88a;
width: 200px;
font-size: 14px;
padding: 5px;
margin-top: -10px;
}
.right {
left: auto;
right: -220px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolorum voluptate provident doloremque aperiam laboriosam ea, vel nihil illum, beatae nemo mollitia possimus, velit<sup>1<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> sapiente nobis! Expedita possimus incidunt nam laudantium corrupti eaque, eveniet fuga perferendis, enim praesentium vero voluptatibus adipisci, dicta blanditiis aliquid asperiores accusantium. Provident voluptate explicabo necessitatibus eos sequi
modi non in nesciunt, debitis alias architecto doloremque sed<sup>2<span class="notes right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> quam voluptatem aut dolorem officia ipsa eum dicta optio delectus ullam
aliquam! Dicta rerum praesentium, laudantium suscipit earum, voluptates placeat totam aperiam non atque consequatur cupiditate neque! Reiciendis consectetur quo, alias facilis officia totam illo minus? Vitae distinctio culpa nesciunt voluptate tempore!
Error enim aperiam odio debitis culpa excepturi, minus molestias inventore amet recusandae<sup>3<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> fugit sit quasi qui ipsum. Aperiam quaerat tenetur,
voluptatibus eaque. Voluptatum veniam, nihil accusamus nesciunt nobis dolore cumque amet asperiores qui, ducimus iusto voluptatibus.
关于javascript - 非JavaScript用户在CSS中的硬编码元素位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40905693/