[英]Text is not responsive for separate paragraphs (html, css)
我如何使“恢复”下的每一行响应，当 window 变小时，它保持在行内，而不是 go 一直到左边。 我尝试了一些东西，但我似乎无法得到它。 go 恢复并查看问题所在的行。 我希望案文本身说明清楚。 提前致谢！
ex. of what i want when window gets smaller:
title: "this is title"
"this is the
second line"
"this is the third
line"
* { 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: 100%; height: 0; }.content-tl { width: 65%; height: 40vh; padding-top: 10%; padding-left: 5%; }.box-tl.content-tl h2 { margin: 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: 100vh; padding: 50px 0; margin: 0; overflow: hidden; transform: translateX(230%) translateY(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; } } /* SPACING WITHIN PARAGRAPH */ tab1 { padding-left: 5ch; } tab2 { padding-left: 7ch; } p { margin:0; padding:0; }
<,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> <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button> <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="resume" class="scroll"> <div class="box-tl"> <div class="content-tl"> <h2>Resume</h2> <p><b>Lorem.</b> Lorem ipsum<tab1>jan 2020 - feb 2020</tab1></p><!--- --><p><tab2>THIS LINE HERE, DO NOT WANT IT TO GO ALL THE WAY LEFT WHEN REDUCING WINDOW SIZE. SEE DESIRED OUTPUT AT THE TOP.</tab2></p><!-- --><p><tab2>THIS LINE HERE, DO NOT WANT IT TO GO ALL THE WAY LEFT WHEN REDUCING WINDOW SIZE. SEE DESIRED OUTPUT AT THE TOP.</tab2></p> </div> </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> <script src="main.js"></script> </body> </html>
如果我理解正确，这应该可以解决它：
.box-tl .content-tl p,
.box-tl .content-tl span, {
text-align: center;
}
如何使两个文本段落显示在图像旁边（响应式）html css？
[英]How to make two text paragraphs to show next to a image (responsive) html css?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.