容器/div 不对齐（html、css）
[英]Containers/divs don't line up (html, css)
问题描述
我试图将时间线放在简历部分的段落旁边，但它会一直转到下一部分/低于它应该在的位置。 我希望时间线在右侧，标题/段落在左侧。 我对容器等有点困惑，所以我希望能得到一些帮助。 先感谢您！
* { box-sizing: border-box; } body.container { margin: 0; padding: 0; font-family: sans-serif; }.container { width: 100%; height: 100vh; scroll-behavior: smooth; overflow-y: scroll; scroll-snap-type: y mandatory; overflow-x: hidden; min-width:100%; }.scroll { width: 100%; height: 100vh; scroll-snap-align: center; position: relative; } /* NAVIGATION BAR */ #main { width: 100%; height: 100%; /*background-image: url(x.jpg);*/ background-size: cover; } nav { position: fixed; width: 100%; height: 80px; background-color: #fff; line-height: 80px; z-index: 99; } nav ul { text-align: center; } nav ul li { list-style-type: none; display: inline-block; transition: 0.8s all; } nav ul li a { text-decoration: none; color: gray; padding: 30px; } nav ul li a:hover { color: #000; text-decoration: none; } /* HOME NAME */.name { font-family: sans-serif; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; } /* SECTIONS */.box { width: 100%; height: 100vh; padding: 70px; display: flex; padding-top: 20%; }.box.imgPro { width: 150px; flex: 0 0 150px; }.box.imgPro img { width: 100%; padding: 10px; border-radius: 50%; }.box.content { padding-left: 20px; }.box.content h2 { margin: 0; padding-left: 0; padding-bottom: 20px; text-align: center; } /* RESUME/TIMELINE */.box-tl { width: 40%; height: 100vh; padding-top: 10% }.box-tl.content-tl h2 { margin: 0; padding-left: 0; padding-bottom: 20px; text-align: center; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }.tl-container { width: 30%; height: 90vh; padding: 50px 0; margin: 0; left: 70%; position: relative; overflow: hidden; top: 10%; }.tl-container:before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -1px; width: 2px; height: 100%; background: #CCD1D9; z-index: 1 }.timeline-block { width: -webkit-calc(10% + 8px); width: -moz-calc(50% + 8px); width: calc(50% + 8px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; clear: both; }.timeline-block-right { float: right; }.timeline-block-left { float: left; direction: rtl }.marker { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #F5F7FA; background: #4FC1E9; margin-top: 10px; z-index: 9999 }.timeline-content { height: 16vh; width: 95%; padding: 0 15px; color: #666 }.timeline-content h3 { margin-top: 5px; margin-bottom: 5px; font-size: 15px; font-weight: 500 }.timeline-content span { font-size: 13px; color: #a4a4a4; }.timeline-content p { font-size: 12px; line-height: 1.5em; word-spacing: 1px; color: #888; } @media screen and (max-width: 768px) {.tl-container:before { left: 8px; width: 2px; }.timeline-block { width: 100%; margin-bottom: 30px; }.timeline-block-right { float: none; }.timeline-block-left { float: none; direction: ltr; } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devide-width. initialpscale=1:0"> <title> TITLE </title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style:css"> <.-- link for back to top button --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> </head> <body> <div class="container"> <div id="main" class="scroll"> <nav> <,-- <img src="x.png" width="200" height="80"> for top-left logo --> <ul> <li><a href="#main">Home</a></li><.-- --><li><a href="#about">About</a></li><.-- --><li><a href="#resume">Resume</a></li><.-- --><li><a href="#portfolio">Portfolio</a></li><,-- --><li><a href="#contact">Contact</a></li> </ul> </nav> <h1 class="name">TITLE</a></h1> </div> <section id="about" class="scroll"> <div class="box"> <div class="imgPro"> <img src="pro.jpg" alt="pro-pic"> </div> <div class="content"> <h2>About</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus, In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis, Suspendisse ac volutpat sem. Nunc in neque mollis. mattis augue tristique. ornare dolor. Morbi imperdiet tincidunt lectus at molestie, Fusce ultricies mattis maximus.</p> </div> </div> </section> <section id="resume" class="scroll"> <div class="box-tl" class="content-tl"> <h2>Resume</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus, In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem, Nunc in neque mollis. mattis augue tristique. ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus,</p> </div> <div class="tl-container"> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>First Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-left"> <div class="marker"></div> <div class="timeline-content"> <h3>Seconed Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>Third Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-left"> <div class="marker"></div> <div class="timeline-content"> <h3>Fourth Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>Fifth Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> </div> </section> <section id="portfolio" class="scroll"> <div class="box"> <div class="imgPro"> <img src="pro.jpg" alt="pro-pic"> </div> <div class="content"> <h2>About</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus, In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem. Nunc in neque mollis, mattis augue tristique, ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus.</p> </div> </div> </section> </div> <script src="main.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-07-29 16:18:17
尝试删除.box-tl的高度或使其：
.box-tl {height: 0;}
DIV不排队
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.