[英]CSS width=auto is restricted by parent.wadth
当元素是另一个元素的子元素时，设置width = auto似乎没有预期的结果。 参见下面的示例-您可以看到“测试一”和“测试二”的宽度受其父div宽度的限制，但是“测试三”可以正确调整其宽度，因为它不是孩子，而是与其相邻的同级兄弟div。
div { background: lightGrey; } div span { background: beige; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .ttPopup, .tooltip + .ttPopup { display: inline-block; visibility: hidden; position: absolute; width: auto; left: 100%; top: 0; background-color: beige; border: solid 1px cyan; text-align: center; } .tooltip + .ttPopup { left: 8%; top: 20%; } .tooltip:hover .ttPopup, .tooltip:hover + .ttPopup { visibility: visible; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <div class="tooltip">Test one <span class="ttPopup">line 1<br>line 2<br>line 3<br>line 4<br>line 5</span> </div> <br><br> <div class="tooltip">Test two <span class="ttPopup"> Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do <br>eiusmod tempor incididunt ut labore <br> et dolore magna aliqua. </span> </div> <br><br> <div class="tooltip">Test three </div> <span class="ttPopup"> Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do <br>eiusmod tempor incididunt ut labore <br> et dolore magna aliqua. </span> </body> </html>
设置width: auto使元素展开以占据其包含块内的所有可用水平空间。
如果它具有任何水平的填充或边框，则其宽度不会添加到元素的总宽度。
父DIV元素将被视为“包含块”，并且auto不会扩展到该块之外，仅在内容需要时才扩展到该块。
解决此问题的一种方法是定义子元素的width 。 例如，我已经将子元素的宽度定义为width: 300px ，似乎正确地采用width 。 看看这是否对您有帮助-
div { background: lightGrey; } div span { background: beige; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .ttPopup, .tooltip + .ttPopup { display: inline-block; visibility: hidden; position: absolute; left: 100%; top: 0; background-color: beige; border: solid 1px cyan; text-align: center; width: 300px; } .tooltip + .ttPopup { left: 8%; top: 20%; } .tooltip:hover .ttPopup, .tooltip:hover + .ttPopup { visibility: visible; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <div class="tooltip">Test one <span class="ttPopup">line 1<br>line 2<br>line 3<br>line 4<br>line 5</span> </div> <br><br> <div class="tooltip">Test two <span class="ttPopup"> Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do <br>eiusmod tempor incididunt ut labore <br> et dolore magna aliqua. </span> </div> <br><br> <div class="tooltip">Test three </div> <span class="ttPopup"> Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit, sed do <br>eiusmod tempor incididunt ut labore <br> et dolore magna aliqua. </span> </body> </html>
您可以简单地添加position: absolute子级，父级没有位置，然后父级和子级元素的css看起来像-
.tooltip {
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .ttPopup, .tooltip + .ttPopup {
visibility: hidden;
position: absolute;
background-color: beige;
border: solid 1px cyan;
text-align: center;
left: 8%;
}
我希望这会对您有所帮助（y）。
CSS：将子div宽度自动设置为内容，而不是完整的父宽度
[英]CSS: Make child div width auto to content in it, not the full parent width
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.