为什么底部div文本会渗入顶部div
[英]why does the bottom div text bleed into top div
问题描述
Hello I am making a basic portfolio https://codepen.io/anon/pen/GbVwje page and I am having trouble with divs. 
您好，我正在制作基本的投资组合https://codepen.io/anon/pen/GbVwje页面，但div遇到了麻烦。 Currently the bottom div (My Work) is bleeding into the top div (header). 目前，下层div（我的工作）正在渗入上层div（标题）。 How can I get the header to just stack on top of my work with out bleeding? 我如何才能在不浪费出血的情况下将标头堆叠在工作之上？ I have been trying everything and I cannot figure out why it is happening. 我一直在尝试所有事情，但我不知道为什么会发生。
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; font-family: "Roboto Cn", sans-serif; } /* body */ body { margin: 0; padding: 0; width: 100%; } header { background: white; background-size: cover; height: 80vh; width: 100%; } /* nav bar */ #logo { margin: 0; } nav { margin: 0; padding: 20px 55px 0 55px; overflow: hidden; } nav img { float: left; padding-left: 15px; height: 40px; width: 51px; } nav ul { float: right; } nav li { display: inline-block; padding: 15px; } nav a { text-decoration: none; color: black; } #about { background: white; text-align: center; padding: 200px 200px 0 200px; font-size: 1.25rem; } #work { background: blue; text-align: center; }
<body> <header> <nav> <div id="logo"><img src="/images/logo.png" /></div> <ul> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">contact</a></li> </ul> </nav> <p id="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </header> <section id="work"> <h1>My Work</h1> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </section> <div id="contact"> <h1>Contact</h1> </div> <footer> <h1>Footer</h1> </footer> <!-- jQuery CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </body> </html>
3 个解决方案
解决方案1
0 2019-07-16 20:43:22
如果将“关于”文本放在其自己的部分中，则可以防止出血。
解决方案2
0 2019-07-17 01:41:28
The simplest thing to do is to change your height on the header element from height: 80vh; 最简单的操作是将标题元素的height: 80vh;从height: 80vh;更改为height: 80vh; to min-height: 80vh; min-height: 80vh;
header {
background: white;
background-size: cover;
min-height: 80vh;
width: 100%;
}
The reason why the text was "bleeding" into the My work section is because the header was not large enough for the content you had in there. 文本被“渗入”“我的工作”部分的原因是，标题不足以容纳其中的内容。 This makes the header div 80vh when the screen is wide enough to fit all of your text in there, but allows it to expand if the screen is thinner and forcing the text to wrap more. 当屏幕足够宽以在其中容纳所有文本时，这将使标题div为80vh，但如果屏幕较薄则允许它扩展，并迫使文本换行更多。
Check this snippet for a working demo: 查看此代码段以获取有效的演示：
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; font-family: "Roboto Cn", sans-serif; } /* body */ body { margin: 0; padding: 0; width: 100%; } header { background: white; background-size: cover; min-height: 80vh; width: 100%; } /* nav bar */ #logo { margin: 0; } nav { margin: 0; padding: 20px 55px 0 55px; overflow: hidden; } nav img { float: left; padding-left: 15px; height: 40px; width: 51px; } nav ul { float: right; } nav li { display: inline-block; padding: 15px; } nav a { text-decoration: none; color: black; } #about { background: white; text-align: center; padding: 200px 200px 0 200px; font-size: 1.25rem; } #work { background: blue; text-align: center; }
<body> <header> <nav> <div id="logo"><img src="/images/logo.png" /></div> <ul> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">contact</a></li> </ul> </nav> <p id="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </header> <section id="work"> <h1>My Work</h1> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </section> <div id="contact"> <h1>Contact</h1> </div> <footer> <h1>Footer</h1> </footer> <!-- jQuery CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </body> </html>
解决方案3
0 2019-07-17 03:20:55
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; font-family: "Roboto Cn", sans-serif; } /* body */ body { margin: 0; padding: 0; width: 100%; } header { background: white; width: 100%; padding: 20px 50px; } /* nav bar */ #logo { margin: 0; } nav { margin: 0; overflow: hidden; } nav img { float: left; padding-left: 15px; height: 40px; width: 51px; } nav ul { float: right; } nav li { display: inline-block; padding: 15px; } nav a { text-decoration: none; color: black; } #about { background: white; text-align: center; padding: 40px 30px; font-size: 1.25rem; } #work { background: blue; text-align: center; padding: 40px 0; }
<body> <header> <nav> <div id="logo"><img src="/images/logo.png" /></div> <ul> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">contact</a></li> </ul> </nav> <p id="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </header> <section id="work"> <h1>My Work</h1> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </section> <div id="contact"> <h1>Contact</h1> </div> <footer> <h1>Footer</h1> </footer> <!-- jQuery CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </body> </html>
Instead of using height try to use padding on the parent div . 而不是使用height，而是尝试在父div上使用padding 。 Hope it'll help 希望对你有帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么这个div在顶部和底部有差距 - Why does this div have gaps at top and bottom
为什么此文本输入在div之外流血，我该如何纠正？ - Why does this text input bleed outside of the div and how do I correct it?
顶部和底部带有文本的html div - html div with text on top and bottom
淡化div中文本的底部或顶部 - Fade bottom or top of text in a div
div中的文本溢出到顶部和底部 - Text in div overflowing to the top and the bottom
底部 div 中的顶部 div 覆盖文本 - Top div cover text in bottom div
为什么“ overflow：hidden”会影响具有上/下边距嵌套div的div的背景可见性？ - Why does overflow:hidden affect background's visibility of a div that has a nested div with top/bottom margin?
创建顶部div会在底部添加空间，为什么？ - Creating top div adds space at bottom why?
使div内容在底部“出血”（或阻止渲染背景图像） - Making a div content to “bleed” on the bottom (or prevent the background image to render)
Div 1行文字=底部，Div超过1行=顶部 - Div 1 line text = bottom, Div more than 1 line = top
相关标签