Question

我想在左侧放置一个已知宽度和高度的<img>，右侧有一个已知宽度和高度的<div>，以及一个将填充的<div>宽度介于上面<img>和<div>之间，并根据内容灵活地拉伸高度。如何在没有Javascript的情况下实现？

Answer 1

您可以使用flexBox模型来实现这一目标，这是一个css3模块，由所有现代浏览器和一些旧的浏览器与polyfill融合。

这是一个例子。

.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

Answer 2

你不需要flexbox。您可以通过应用相应的<img>值来左右定位<div>和float，并通过应用位置<div>并给予absolute来拉伸中间left }和right值等于相应边的元素宽度。

关于高度，除非明确指定，否则绝对定位元素默认收缩包装以适合其内容，因此您不必担心它：

* {
  margin: 0;
  padding: 0;
}
.fixed {
  width: 100px;
  height: 100px;
  background: hotpink;
}
#left {
  float: left;
}
#right {
  float: right;
}
#flexible {
  position: absolute;
  left: 100px; /*width of image*/
  right: 100px; /*width of div*/
  background: dodgerblue;
}

<img id="left" class="fixed" src="http://cdn-media-2.lifehack.org/wp-content/files/2014/10/widescreen-adam-levine-background-1024x640.jpg" />
<div id="flexible">Some Content</div>
<div id="right" class="fixed"></div>

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

2 个答案: