Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

是否有可能连续创建三个div，其中中间div的行为与.mid（扩展到10em，缩小到5em）一样，左右div在auto上表现得像边缘：扩展到中心.mid和收缩如果没有足够的空间，则为0。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我是否遗漏了某些内容，或者无法使用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>

流体半流体流体

1 个答案: