html - 如何拉伸(stretch)元素以填充具有固定宽度的两个元素之间的空间？

Question

我想放置一个 <img>左边已知宽度和高度，一个<div>右边有已知的宽度和高度，还有一个<div>这将填满上述 <img> 之间的宽度和 <div>并根据内容灵活拉伸(stretch)高度。我如何没有 Javascript 实现这一点？

Answer 1

您可以使用 flexBox 模型来实现这一点，这是所有现代浏览器和一些带有 polyfill 的旧浏览器支持的 css3 模块。

这是一个例子。

.container {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.fixedWidth {
   width: 100px;
   height: 100px;  
   margin-right: 20px
}

.flexibleDiv {
   -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 80%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; 
}

http://fiddle.jshell.net/2y1c5deL/

这是一个 Flexbox polyfill

https://github.com/doctyper/flexie