堆栈内存溢出
  简体   繁体   English

浮动div内的文本无响应

[英]Text inside floated div not responsive

 原文  2020-02-15 12:44:22  9   3    html/ css

问题描述

In the following code:在以下代码中： 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid View</title> <style> * { box-sizing: border-box; } html { font-size: 1vw; } body { padding: 0 0; margin: 0; background-color: violet; font-size: 1.1rem; } .container { width: 80%; margin: 0 auto; } header { background-color: rgb(133, 76, 76); border: .01rem solid rgb(133, 76, 76); margin-bottom: 4%; position: fixed; top: 0; left: 10%; right: 10%; padding: 0; } header h1 { text-align: center; } .row { background-color: blueviolet; margin-bottom: 4%; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; background-color: whitesmoke; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } div#three div.col-3 { width: 24%; margin-right: 1.33%; } div#three div.col-3:last-of-type { margin-right: 0; } @media only screen and (max-width: 780px) { html { font-size: 2.5vw; } body { padding-top: 17%; } } @media only screen and (max-width: 480px) { html { font-size: 3vw; } body { padding-top: 17%; } } </style> </head> <body> <div class="container"> <div id="one" class="row"> <div class="col-12"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> </div> <div id="three" class="row"> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> </div> </div> </body> </html>

The web page breaks at around 470px (checked through device toolbar using chrome inspect).网页在大约470px处470px （使用 chrome 检查通过设备工具栏检查）。 This happens as the text inside the 4 floated divs in the second row is not responsive and gets out of the div at 470px .发生这种情况是因为第二行中 4 个浮动divs内的文本没有响应并且在470px处470px div 。 This is only happening when the text is inside a floated element, when I make the divs block element again, the text becomes responsive.这仅在文本位于浮动元素内时发生，当我再次制作divs块元素时，文本变得响应。

Can someone tell me why this happens ?有人能告诉我为什么会这样吗？

3 个解决方案

解决方案1
 2  2020-02-15 13:09:50

Hope this help you.希望这对你有帮助。 Added below mentioned CSS添加了下面提到的 CSS

    div#three div.col-3{
        width: 49%;
        margin: 0 0.5%;
        margin-bottom: 5px;}


 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid View</title> <style> * { box-sizing: border-box; } html { font-size: 1vw; } body { padding: 0 0; margin: 0; background-color: violet; font-size: 1.1rem; } .container { width: 80%; margin: 0 auto; } header { background-color: rgb(133, 76, 76); border: .01rem solid rgb(133, 76, 76); margin-bottom: 4%; position: fixed; top: 0; left: 10%; right: 10%; padding: 0; } header h1 { text-align: center; } .row { background-color: blueviolet; margin-bottom: 4%; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; background-color: whitesmoke; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } div#three div.col-3 { width: 24%; margin-right: 1.33%; } div#three div.col-3:last-of-type { margin-right: 0; } @media only screen and (max-width: 780px) { html { font-size: 2.5vw; } body { padding-top: 17%; } div#three div.col-3 { width: 49%; margin: 0 0.5%; margin-bottom: 5px; } } @media only screen and (max-width: 480px) { html { font-size: 3vw; } body { padding-top: 17%; } } @media only screen and (max-width: 380px) { div#three div.col-3 { width: 99%; margin: 0 0.5%; margin-bottom: 5px; } } </style> </head> <body> <div class="container"> <div id="one" class="row"> <div class="col-12"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> </div> <div id="three" class="row"> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> <div class="col-3"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores, labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p> </div> </div> </div> </body> </html>

解决方案2
 0  2020-02-15 13:26:03

A single CSS rule can fix this issue without altering breakpoints or existing source code -单个 CSS 规则可以解决此问题，而无需更改断点或现有源代码 - 

 div#three div.col-3{ overflow-wrap: break-word; }

This does not take best practices in terms of readability for the end user into consideration but does fix the bug you're experiencing.这并未考虑最终用户可读性方面的最佳实践，但确实修复了您遇到的错误。 Further tweaking with padding on .col-3 divs for mobile devices should help.进一步调整移动设备的 .col-3 div 上的填充应该会有所帮助。

解决方案3
 0  2020-02-15 15:40:50

Changing the font-size to a 'vw' value of text inside floating elements resolves the issue.将字体大小更改为浮动元素内文本的“vw”值可解决此问题。 But i still can't figure out why.但我仍然无法弄清楚为什么。

暂无
暂无

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

相关问题 在文本div中放置浮动元素 - position floated element inside a div of text 浮动div内的文字换行问题 - Text wrapping issues inside of a floated div 尝试将旋转的文本置于浮动div中 - Trying to center a rotated text inside a floated div div自动响应内部文本 - div auto responsive to text inside 文本溢出浮动div - Text overflowing floated div 浮动div中的文字 - Text in floated div 使浮动图像出现在 div 内的某些文本旁边 - Make a floated image appear beside some text inside a div 链接在浮动div中不起作用 - Link not working inside floated div 如何使内部div带有文本以进行响应 - How to make an inside div with text to be responsive 文本填充在浮动 div 中不起作用 - Text padding is not working in floated div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM