0

这是一个小提琴：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>
4

0 回答 0