Question

我尝试有一个包含3个div的行。中间div应该响应一个宽度为mex的剩余空间，并且应该用颜色填充写入。

我知道我可以使用左右自动边距的包装来解决这个问题，但我需要让中心div透明而不显示包装背景颜色。

我试图使用显示表解决这个问题，但没有设法做到这一点。

<div id="table">
    <div id="row">
        <div id="left"></div>
        <div id="middle">Row 1</div>
        <div id="right"></div>
    </div>
    <div style="clear:both;"></div>
    <div id="row">
        <div id="left"></div>
        <div id="middle">Row 2</div>
        <div id="right"></div>
    </div>
    <div style="clear:both;"></div>
</div>

用css

#table {
    width:100%;
    display:table;
}
#row {
    width:100%;
    display:table-row;
    margin-bottom:10px;
}
#left {
    width:auto;
    display:table-cell;
    background-color: #FF0000;
}
#middle {
    display:table-cell;
    width:auto;
    max-width: 100px;
    height:50px;
    background-color: #eeeeee;
}
#right {
    width:auto;
    display:table-cell;
    background-color: #FF0000;
}

http://jsfiddle.net/thepofo/kdJHh/2/

欢迎提出意见。

Answer 1

hacky方式

http://jsfiddle.net/coma/rFg2L/2/

.foo {
    overflow: hidden;
}

.foo > div {
    position: relative;
    margin: 0 auto;
    max-width: 100px;
}

.foo > div:before,
.foo > div:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 999999px;
    background-color: red;
}

.foo > div:before {
    right: 100%;
}

.foo > div:after {
    left: 100%;
}

弹箱方式（http://caniuse.com/#search=flex）

http://jsfiddle.net/coma/YYm32/

.foo { 
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
}

.foo > div {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

.foo > div:nth-child(2) {
    max-width: 100px;
}

.foo > div:first-child,
.foo > div:last-child {
    background-color: red;
}

奖励跟踪

您无需添加额外标记来清除浮动广告：http://jsfiddle.net/coma/Lqc2H/

Answer 2

这可能或不足以为您工作，但如何将div设置为包装器宽度的33％。

<div class="wrap">
    <div class="left">&nbsp;</div>
    <div class="middle">Lorem ipsum dolor...</div>
    <div class="right">&nbsp;</div>
</div>

.wrap>div {
float:left;
    width: 33%;
}
.middle {
    max-width: 200px;
    outline:1px solid;
}

fiddle here

否则，您可能需要考虑特定宽度的媒体查询。

自动宽度需要响应div

2 个答案: