需要自动宽度的响应式 div答案

【问题标题】：Responsive divs needed with auto width需要自动宽度的响应式 div
【发布时间】：2013-12-09 07:56:42
【问题描述】：

我尝试用 3 个 div 排成一行。中间的 div 应该以 mex-width 响应，剩余的空间和 write 应该用颜色填充。

我知道我可以使用具有左右自动边距的包装器来解决这个问题，但我需要让中心 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/

欢迎提出想法。

【问题讨论】：

id 属性必须在每个文档中都是唯一的。
将 ID 更改为类不会更改必须，仍然相同

标签： css responsive-design

【解决方案1】：

老套路

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/

【讨论】：

谢谢，这为我解决了。并感谢您提供清晰的浮动提示

【解决方案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

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

【讨论】：