有人可以告诉我我在这里做错什么吗？我希望这两个框在divA和divB之间都是EXACT相同的宽度.只是因为divB框在“p2”中稍长的文本不应该改变整个框的宽度.我不想为“p1”使用硬像素宽度,以便对视口宽度来说可以灵活.我只是希望p1框永远是p2的一半,无论内容如何.有人可以帮我或者建议一个更好的方法吗？
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div
{
display:-moz-Box; /* Firefox */
display:-webkit-Box; /* Safari and Chrome */
display:Box;
width:100%;
border:1px solid black;
}
#p1
{
-moz-Box-flex:1.0; /* Firefox */
-webkit-Box-flex:1.0; /* Safari and Chrome */
Box-flex:1.0;
text-align:right;
border:1px solid red;
}
#p2
{
-moz-Box-flex:2.0; /* Firefox */
-webkit-Box-flex:2.0; /* Safari and Chrome */
Box-flex:2.0;
text-align:left;
border:1px solid blue;
}
</style>
</head>
<body>
<div id='divA'>
<p id="p1">Hello</p>
<p id="p2">Column 2</p>
</div>
<div id='divB'>
<p id="p1">Hello</p>
<p id="p2">Why is this Box larger</p>
</div>
</body>
</html>
解决方法
如果你给孩子一个明确的宽度,他们将表现.
flex值将覆盖这些宽度,为您提供所需的布局.这些框只需要一个值即可.没有定义的宽度,它们缩小到其内容的宽度,然后应用flex值.
flex值将覆盖这些宽度,为您提供所需的布局.这些框只需要一个值即可.没有定义的宽度,它们缩小到其内容的宽度,然后应用flex值.
...
#p1,#p2 {
width: 1px;
}
...
它只有当它们都具有相同的显式宽度(可以是任何值：0,1px,100％等)时才起作用
