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