Может кто-нибудь сказать мне, что я здесь делаю не так?Я хочу, чтобы ящики были ТОЧНОЙ одинаковой ширины между divA и divB.Тот факт, что в блоке 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>