Question

当元素是另一个元素的子元素时，设置width = auto似乎没有预期的结果。请参阅下面的示例 - 您可以看到“测试一”和“测试二”的宽度受其父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>

Answer 1

设置width: auto会使元素展开以占据其包含块内的所有可用水平空间如果它有任何水平填充或边框，则它们的宽度不会添加到元素的总宽度。

父DIV元素将被视为“包含块”，auto将不会扩展到该块之外，仅在内容需要时才会扩展到块。

Answer 2

解决此问题的一种方法是定义子元素的width。例如我已将子元素的宽度定义为width: 300px，它似乎正确地取width。看看这对你有帮助吗？

＆＃13;

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; }

＆＃13;

<!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>

＆＃13;

或

您可以简单地将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 width = auto受parent.wadth限制

2 个答案:

或