繁体   English   中英

即使我将宽度分配给,文本也会溢出
[复制]

在示例代码中 - 我给了框 3框 4的宽度为200px我实际上并不关心使用这些宽度,但我给了它们颜色,以便您可以更好地直观地看到我的问题。

问题是我的文本没有被父<div>包含在框 3 中具有设置(硬编码)像素宽度,特别是它在 1 行中向右运行,而不是包裹在<div>内。 对于框 4 ,我可以理解它试图延伸到最后,但如果它不再是它,它就会再次跑出网格之外。 所以我缺少一些东西来帮助包装内容。 我该如何解决这个问题?

 * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

Overflowing text even though I assign width to

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

在示例代码中 - 我给了框 3框 4的宽度为200px我实际上并不关心使用这些宽度,但我给了它们颜色,以便您可以更好地直观地看到我的问题。

问题是我的文本没有被父<div>包含在框 3 中具有设置(硬编码)像素宽度,特别是它在 1 行中向右运行,而不是包裹在<div>内。 对于框 4 ,我可以理解它试图延伸到最后,但如果它不再是它,它就会再次跑出网格之外。 所以我缺少一些东西来帮助包装内容。 我该如何解决这个问题?

 * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

2 个回复

利用word-wrap属性。 添加word-wrap: break-word; 在您的.box3.box4类上。 更多关于它的信息

 * { margin: 0; padding: 0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body { background: rgb(7, 7, 7); color: #fff; }.imgContainer { width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom: 10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom: 10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget { height: 70px; width: 50px; position: fixed; top: 5px; left: 32px; opacity: 0; user-select: none; }.smallu { height: 50px; width: 50px; user-select: none; }.container { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } nav { position: relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display: none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a { color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover { background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link { display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth { padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding: 50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size: 16px; line-height: 22px; }.hearted { color: red; font-size: 12px; }.opacityStyle { opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe>.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing: 3px; margin: 0 3%; line-height: 70px; text-transform: uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing: 1px; font-size: 15px; font-weight: 300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color: rgb(75, 243, 255); }.error_message { color: #fc6e51; padding-bottom: 15px; font-size: 13px; line-height: 30px; } #success_page { color: #9ce726; padding-bottom: 10px; font-size: 12px; } #success_page h3 { font-size: 17px; font-weight: 400px; color: #4ab217; } #success_page p { font-size: 12px; font-weight: 400px; color: #b3b3b3; } /* ------------------------------------------------------------------------------ THE IMPORTANT PART -------------------------------------------------------------------------------*/.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width: 300px; height: 300px; background: blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row: 2/3; background: blue; word-wrap: break-word; }.box4 { width: 200px; grid-column: 1/4; grid-row: 4/4; background: #fc6e51; word-wrap: break-word; }.wrapper { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap: 10px; max-height: 55vh; background: #212121; }.megawrap { display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } /* ------------------------------------------------------------------------------ THE IMPORTANT PART END -------------------------------------------------------------------------------*/ @media (min-width: 1080px) {.bodyC2 { max-width: 360px; padding-left: 150px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (max-width: 1175px) {.bodyC2 { max-width: 360px; padding-left: 75px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (max-width: 1400px) {.bodyC2 { max-width: 360px; padding-left: 75px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger { display: none; }.dropdown { display: none; }.menu { display: flex; }.bodyContainer { flex-direction: row; }.bodyC2 { flex-direction: column; padding-top: 100px; } } /* Once completely tiny shrink text to columns */ @media (max-width: 975px) {.bodyContainer { flex-direction: column; }.bodyC2 { flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

我将.breakWord class 样式应用于具有文本溢出的<div>元素:您可以将break-word值设置为overflow-wrap样式,以便它们在容器内滑动。

 * { margin:0; padding:0; } /* Added the following class style */.breakWord { overflow-wrap: break-word; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }
 <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <.-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <.-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <.-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3 </div> <.-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <!-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <!-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box4box </div> </div> </div>

1 为什么这些div的左侧对齐,即使width:60%; [重复]

这个问题已经在这里有了答案: 如何将DIV水平居中 3个答案 我做了一个div 然后在CSS集中 并且div内的文本向左对齐。 它占据了60%的身体,但它向左对齐,而不是居中对齐。 为什么是这样? 除了这个课,别无他法。 文字对齐:居中; ...

2 100%宽度的表格溢出div容器[重复]

这个问题在这里已经有了答案: 表格溢出 div 10 个答案 11 个月前关闭。 我遇到了溢出其父容器的 html 表的问题。 .page { width: 280px; border:solid 1px blue; }.my-table { word-wrap: break-word; }. ...

3 即使我在提示文本上使用 AutoSizeText 小部件,为什么我的下拉菜单会溢出?

我试图让我的 DropDowns 更具响应性,但我在这样做时遇到了问题。 我在文本上使用 AutoSizeText 小部件,但它仍然溢出。 最后有一个小下拉箭头可能会导致它,但我不确定为什么会这样或如何解决这个问题。 如果有人有这方面的经验或可以提供任何建议,我将不胜感激! 谢谢! 目前的样子。 ...

4 为什么即使我没有分配声明也会出现[重复]

这个问题在这里已经有了答案: 如何在 c++ 中调用基本 class 构造函数 [重复] (3 个答案) 调用基本 class 构造函数的规则是什么? (10 个回答) 4 个月前关闭。 你好。 我对此代码有疑问。 当我运行这段代码时,我得到的结果是A0 B0 A0 B0 C0但我不知道为 ...

2021-01-09 03:45:49 0 27   c++
5 当父 DIV 宽度按百分比设置时,防止文本溢出 DIV

我知道有很多类似的帖子,但我已经阅读了 20 多个,我找到的解决方案对我没有帮助。 我的一些内容的布局类似于我在此处详述的布局: 小提琴示例 有一个包含 3 个子 div 的容器 div “Strip” ; img , title , description 。 包含 div 的固定宽度为 9 ...

6 溢出div静态宽度

我有一个充满动态内容的div。 div宽度设置为680像素,但是,如果内容超出此宽度,而不是环绕,则只需继续一行就可以创建非常宽的div。 我应该怎么做才能强制div的680像素,并迫使动态内容包含在这些限制之内? 谢谢 ...

7 Div溢出页面宽度

我的问题直截了当。 我从另一个工作正常的站点复制了我的站点的模板。 到目前为止,我已经解决了大多数问题,但我无法找出问题所在。 每当在我的iPhone上加载webapp时,页面的宽度就会设置为设备默认值,但我仍然能够水平滚动页面并看到空白 以前有没有人遇到过此问题,如果有,是否有解决方 ...

2012-09-22 06:50:30 1 32   html/ css
8 即使宽度不是100%,Div也会分成新行[重复]

这个问题已经在这里有了答案: 如何删除内联块元素之间的空间? 39个答案 所以我有一个问题。 我有2个div,它们应该一个接一个。 它们都被div封装,该div具有一些max-width : n 。 我将width: 70%分配给第一格,将wid ...

9 超出100%高度和100%宽度div的文本溢出

您好,所以我有一个仅包含两张图片的div,并且不喜欢那么多文本,但是尽管如此,文本还是从容器中溢出了,这是一个问题。 我的目标是要有两个单独的容器,列表位于底部。 有没有可以顺利完成此目标的方法? 我只需要摆脱溢出并能够将列表保存在单独的容器中。 列表可以在同一个容器中,但我不太确定该结 ...

2016-10-10 21:23:25 1 90   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM