如何给定一个容器固定宽度，另一个容器占父容器宽度剩下的100%

Question

父容器给定一个固定的宽度，容器内部分为两块，左侧是图片（已固定宽度），右侧是文字。
请问如何将文字部分的宽度设为剩余容器的100%？
因为当后台传过来的图片时才显示图片容器，没有传图片过来时值存在文字容器，此时该如何做？

Answer 1

left {
    width: 100px;
}

right {
    width: calc(100% - 100px);
}

Answer 2

你可以把图片给每一个都加上，然后程序控制图片，是显示，还是不显示！ 这不就是行了！显示就是上面的样式，不显示就是下面的样式，样式你自己已经写出来了！还有啥纠结的！

Answer 3

这种东西我有时候会这么做，整个外层position:relative;padding-left:图片的宽度。
然后左边图片定位在左边。

Answer 4

默认，无需设置。
图片设置 float: left; 文字部分无需特别设置。

Answer 5

两种方法，一个是用calc(100% - 30px);就像楼上那位哥们写的那样

还有就是用flex
父元素display:flex
第一个元素flex: 0 0 30px;
第二个元素flex: 1;

Answer 6

其实很简单，如果不考虑一些低版本的ie7,6之类的
https://jsfiddle.net/hifronte...