1

http://jsfiddle.net/4DhvS/

HTML には 2 つの列があります。右側は大きな数字、左側はテキストです。その下のウィンドウのサイズを変更すると、右側の数字が消えたくないので、左側のテキスト (p クラスのパラメーター) が右側の div (p クラスのデータ) と接触したときに折り返されます。

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

2 に答える 2