Menerapkan kedudukan: ditetapkan pada elemen memecahkan penjajaran kandungan yang dikawal oleh paparan: flex.
P粉131455722
2023-08-02 17:11:54
<p>Saya perlukannya. perkataan dan. Elemen baris dilabuhkan ke bahagian atas port pandangan apabila halaman ditatal - dalam kedudukan asalnya, di mana garisan berada di bawah perkataan. <br /><br />Saya berjaya membetulkannya. perkataan dan kedudukan: melekit, tetapi menghadapi dua masalah:<br /></p><p><kod></kod><kod></kod></p>
Apabila saya sapu melekit ke . baris, ia "melompat" di atas perkataan dan saya tidak tahu bagaimana untuk membetulkannya ke bahagian atas port pandangan tetapi memaksanya untuk kekal di sana. Kelekatan di bawah unsur perkataan bukanlah nilai yang betul pada mulanya - ia akan "menggoncang" teks apabila anda mula menatal. Nilai yang betul telah ditetapkan - ia berfungsi dengan baik dan saya lebih suka menggunakannya Namun, ia rosak. Lokasi kelas amaran (fon merah): ia sepatutnya dalam. Bertentangan (mendatar) teks transkripsi, tetapi nilai tetap yang meruntuhkan teks kedua-dua kelas ini bersama-sama. <br /><p><br /></p><p>Di sini juga terdapat JS Bin dengan "situasi" ini. </p><ol>
</ol>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.word {
kedudukan: melekit;
atas: 0;
indeks-z: 1;
warna latar belakang: putih;
}
.perkataan {
pelapik: 1vw 3vw 2% 3vw;
}
.perincian perkataan {
paparan: flex;
justify-content: ruang-antara;
align-item: garis dasar;
}
.transkripsi {
berat fon: normal;
}
.amaran {
warna: merah;
jidar-kiri: auto;
}
.line {
atas sempadan: 2px pepejal #fdb239;
}
.maksud {
jenis-gaya senarai: tiada;
set semula balas: item;
sempang: auto;
saiz fon: calc(0.7em + 1.5vw);
}
.maksud >
kedudukan: relatif;
}
.maksud > li::sebelum {
kandungan: kaunter(item);
kenaikan balas: item;
jawatan: mutlak;
atas: 0;
text-align: tengah;
jidar-kiri: calc(-0.7em - 2.5vw);
}
.perkataan makna {
jidar atas: 50px;
}
.ayat {
jenis-gaya senarai: tiada;
padding-left: 0;
saiz fon: calc(0.7em + 1.5vw);
jidar atas: 30px;
}
.ayat > li.sentence-ru {
jidar atas: 15px;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<badan>
<div class="word">
<span>Perkataan</span>
<div class="word-details">
<div class="transkripsi">/ transkripsi /</div>
<div class="warning">COMMENT</div>
</div>
</div>
<hr class="line">
<ol class="makna">
<li class="makna-perkataan">Maksud1</li>
<ul class="ayat">
<li class="sentence-en">Lorem Ipsum hanyalah teks tiruan bagi industri percetakan dan taip huruf. Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuat buku spesimen jenis. Ia telah bertahan bukan sahaja lima abad, tetapi juga lompatan ke dalam penataan elektronik, kekal pada asasnya tidak berubah. Ia dipopularkan pada tahun 1960-an dengan keluaran helaian Letraset yang mengandungi petikan Lorem Ipsum, dan lebih baru-baru ini dengan perisian penerbitan desktop seperti Aldus PageMaker termasuk versi Lorem Ipsum</li>
<li class="sentence-ru">Bertentangan dengan kepercayaan popular, Lorem Ipsum bukan sekadar teks rawak. Ia berakar umbi dalam sekeping sastera Latin klasik dari 45 SM, menjadikannya lebih 2000 tahun. Richard McClintock, seorang profesor Latin di Kolej Hampden-Sydney di Virginia, mencari salah satu perkataan Latin yang lebih kabur, consectetur, daripada petikan Lorem Ipsum, dan melalui petikan perkataan dalam kesusasteraan klasik, menemui sumber yang tidak dapat diragukan. Lorem Ipsum berasal daripada bahagian 1.10.32 dan 1.10.33 "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) oleh Cicero, yang ditulis pada 45 SM. Buku ini adalah risalah tentang teori etika, sangat popular semasa Renaissance. Baris pertama Lorem Ipsum, "Lorem ipsum dolor sit amet..", berasal daripada baris dalam bahagian 1.10.32.</li>
</ul>
<li class="makna-perkataan">Maksud2</li>
<ul class="ayat">
<li class="sentence-en">Lorem Ipsum hanyalah teks tiruan bagi industri percetakan dan taip huruf. Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuat buku spesimen jenis. Ia telah bertahan bukan sahaja lima abad, tetapi juga lompatan ke dalam penataan elektronik, kekal pada asasnya tidak berubah. Ia dipopularkan pada tahun 1960-an dengan keluaran helaian Letraset yang mengandungi petikan Lorem Ipsum, dan lebih baru-baru ini dengan perisian penerbitan desktop seperti Aldus PageMaker termasuk versi Lorem Ipsum</li>
</ul>
</ol>
</badan>
</html></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Mengasingkan beberapa elemen di bahagian atas halaman adalah sukar apabila menatal, jadi saya mencadangkan penyelesaian yang lebih mudah. "Melompat" bar melekit anda adalah kerana kedudukan awal bar melekit berbeza daripada tempat ia berada di bahagian atas halaman semasa menatal
Untuk mengelakkan garis jam anda hilang semasa menatal, saya akan meletakkan semua komponen yang anda mahu simpan di bahagian atas halaman dalam bekas, seperti div, dan kemudian menjadikan bekas itu melekit.
Masalah kedua ialah bar melekit anda agak rendah pada mulanya kerana tetapan margin badan lalai (10px). Kemudian kami menatal halaman - jidar badan telah ditatal, dan anda menetapkan bar melekit untuk berada di bahagian atas sepenuhnya (atas: 0;), jadi ia perlu melonjak 10px tambahan ke atas. Penyelesaian cepat adalah untuk menetapkan margin atas badan kepada 0 dan kemudian bar tampal anda akan sentiasa berada dalam kedudukan yang sama di bahagian atas halaman.
Di bawah ialah coretan kod yang dikemas kini.
body { margin-top: 0; } .sticky-container { position: sticky; top: 0; z-index: 1; background-color: white; } .word { padding: 1vw 3vw 2% 3vw; } .word-details { display: flex; justify-content: space-between; align-items: baseline; } .transcription { font-weight: normal; } .warning { color: red; margin-left: auto; } .line { border-top: 2px solid #fdb239; } .meaning { list-style-type: none; counter-reset: item; hyphens: auto; font-size: calc(0.7em + 1.5vw); } .meaning > li { position: relative; } .meaning > li::before { content: counter(item); counter-increment: item; position: absolute; top: 0; text-align: center; margin-left: calc(-0.7em - 2.5vw); } .meaning-word { margin-top: 50px; } .sentences { list-style-type: none; padding-left: 0; font-size: calc(0.7em + 1.5vw); margin-top: 30px; } .sentences > li.sentence-ru { margin-top: 15px; }<html> <body> <div class="sticky-container"> <div class="word"> <span>Word</span> <div class="word-details"> <div class="transcription">/ transcription /</div> <div class="warning">COMMENT</div> </div> </div> <hr class="line"> </div> <ol class="meaning"> <li class="meaning-word">Meaning1</li> <ul class="sentences"> <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li> <li class="sentence-ru">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</li> </ul> <li class="meaning-word">Meaning2</li> <ul class="sentences"> <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li> </ul> </ol> </body> </html>