这是一个小提琴:http: //jsfiddle.net/4DhvS/
请注意,当您调整底部窗口的大小时,右侧的大数字就消失了?相反,我怎样才能得到它,以便左侧 div 中的文本由于限制 div 的大小而添加更多行,而右侧的数字仍然垂直对齐?
body {
margin: 0;
padding: 0;
font-family: Roboto;
font-size: .75em;
font-weight: lighter;
}
ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #cccccc;
}
.group {
width: 100%;
margin-bottom: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group h2 {
display: block;
font-size: 14px;
background: gray;
padding: 5px;
}
.group li {
clear: both;
}
.group p {
padding: 3%;
text-align: center;
font-size: 14px;
}
.group2 ul {
display: table;
width: 100%;
}
.group2 li {
display: table-row;
}
.group2 p {
display: table-cell;
vertical-align: middle;
width: 46%;
border-bottom: 1px solid #cccccc;
}
.group li:last-child p {
border-bottom: 0;
}
p.parameter {
text-align: left;
text-wrap: normal;
word-wrap: break-word;
}
p.data {
text-align: right;
}
<div class="group group2">
<ul>
<li>
<p class="parameter">
GGPawdawdwawdawdawdawdawdwadawdawadawdawdaw<br>
sdadawdawdawdawda<br>
dawwdawawdawdawd<br>
dawaawdawdwaddsd<br>
dawawddawd
</p>
<p class="data">
265,265,265,265,265,265,265,265.00<br>
</p>
</li>
<li>
<p class="parameter">
GGP<br>
sda<br>
dawd<br>
dawdsd<br>
dawdawd
</p>
<p class="data">
265<br>
wadw<br>
awdaw
</p>
</li>
<li>
<p class="parameter">
GGP<br>
sda<br>
dawd<br>
dawdsd<br>
dawdawd
</p>
<p class="data">
265<br>
wadw<br>
awdaw
</p>
</li>
</ul>
</div>