Question

我创建了一个包含三个数据单元的包装器来填充100％的区域。第三个数据单元应该一直向右对齐，但正如你在我的jsfiddle中看到的那样，它并没有一直向右对齐。我的外部细胞为48％，中间细胞为4％，因此它加起来为100％。我需要改变什么？

这是我的傻瓜：http://jsfiddle.net/huskydawgs/5cypdu4q/2/

我的HTML

<div class="wrapper-data">
    <div class="data_cell1">
        <p><strong>Contact</strong>: Link Polk, Manager<br />
        <strong>Phone</strong>: (407) 665-7177<br />
        <strong>Email</strong>: <a href="mailto:LPolk@seminolecountyfl.gov">LPolk@seminolecountyfl.gov</a></p>
    </div>
    <div class="data_cell2"></div>
    <div class="data_cell3">
        <p class="right"><strong>Fax</strong>: (407) 665-7183<br />
        <strong>Department</strong>: Budget<br />
        <strong>Agency</strong>: Seminole County, Florida</p>
    </div>
</div>

我的CSS：

/* Wrapper - Data */

    .wrapper-data {
        position: relative;
        width: 100%;
        border: none;
        margin: 20px 0 0 0;
        overflow: hidden;
            border:1px solid black;
    }

        .wrapper-data p {
            font-family:Arial,Helvetica,sans-serif;
            font-size:16px;
            color:#616161;
            margin:0 0 0 49px;
            text-align:left;
            font-weight:normal;
            line-height: 24px;
    }

        .wrapper-data p.right {
            font-family:Arial,Helvetica,sans-serif;
            font-size:16px;
            color:#616161;
            margin:0 0 0 80px;
            text-align:left;
            font-weight:normal;
            line-height: 24px;
    }

    .data_row {
        height: 100%;
        min-height: 100%;
        white-space: nowrap;
        display: table;
        width: 100%;
    }

    .data_cell1 {
        width: 48%;
        white-space: normal;
        display: table-cell;
        vertical-align: middle;
    }

    .data_cell2 {
        width: 4%;
        display: table-cell;
        white-space: normal;
    }

    .data_cell3 {
        width: 48%;
        display: table-cell;
        white-space: normal;
            border:1px solid red;
}

Answer 1

浮动属性可能会起作用，但是第二列应该至少有数据而第三列应该是47％，为了你定义的边界

.data_cell1 {
    width: 48%;
    white-space: normal;
    display: table-cell;
    vertical-align: middle;
    float: left;
}

.data_cell2 {
    width: 4%;
    display: table-cell;
    white-space: normal;
    float: left;
}

.data_cell3 {
    width: 47%;
    display: table-cell;
    white-space: normal;
        border:1px solid red;
        float: right;
}

或第3栏使用

.data_cell3 {
    width: 48%;
    display: table-cell;
    white-space: normal;
    outline:1px solid red;
    float: right;
}

第3列根据需要保留宽度但是将边框更改为轮廓，outilne对边框，填充或边距的容器宽度没有影响

Answer 2

我忘记在代码中放入.data_row div类。

修复了它。

第三个数据单元不会一直向右对齐

2 个答案: