流体半流体流体 div

Question

.mid{
    margin:0 auto;
    max-width:10em;
    min-width:5em;
    border:1px solid red;
}

<div class='mid'>...</div>

此代码创建一个居中的 div，如果浏览器 window 足够小，它将扩展到 10em 并缩小到 5em。几乎都是我想要的。

是否可以连续创建三个 div，其中中间 div 的行为与 .mid（扩展到 10em，收缩到 5em）左右 [=36] 完全一样=]s 的行为类似于 auto 上的边距：扩展到中心 .mid，如果不够 space.

则缩小到 0

我找到的最接近的解决方案是 this。唯一的问题是 .mid 没有缩小，因为 td 没有混合宽度和最大宽度。

.cont{
    display:table;
   /* table-layout:fixed; /* this prevented shrinking */
    width:100%;
}
.cont div{
    display:table-cell;
    overflow:hidden;

    
}
 .mid{
    width:10em;    /* in table width behaves like max-width*/
    border:1px solid red;
}

<div class='cont'>

    <div>left</div>
    <div class='mid'>...</div>
    <div>right</div>
    
</div>

我是不是遗漏了什么或者无法在 html/css 中创建此布局？

Answer 1

您可以使用弹性属性：http://jsfiddle.net/7v1m5g8d/1/

.cont {
    display:flex;
    width:100%;
    border:1px solid blue;
    text-align:center;
}
.cont div {
    flex:1;
}
.cont div.mid {
    /* strippes for demo */
    background:repeating-linear-gradient(to right, transparent 0, transparent 0.9em, gray 0.9em, gray 1em);
    min-width:5em;
    max-width:10em;
    flex:auto;/* reset */
    border:1px solid red;
}
/* do not forget to add prefix-vendor if needed or a script as prefixfree.js :) */

<div class='cont'>
    <div>left</div>
    <div class='mid'>...</div>
    <div>right</div>
</div>

流体半流体流体 div

fluid semi-fluid fluid divs

html

css

fluid-layout

流体 半流体 流体 div

fluid semi-fluid fluid divs

html

css

fluid-layout

流体半流体流体 div