Question

我有HTML结构

<div class="wraper">
        <div class="lewy-fluid">
            <div class="lewy-fluid-fluid">
                TITLE
            </div>
            <div class="lewy-fluid-fix">
                Kontakt
            </div>
        </div>
        <div class="prawy-fix">
            Czat
        </div>
    </div>

需要制作：

 _____________________________________________________________________________
| .LEWY-FLUID                                         | .PRAWY-FIX            |

和里面.LEWY-FLUID：

 _________________________________________________________
| .LEWY-FLUID-FLUID              | .LEWY-FLUID-FIX       |

所以我有流体和固定的div，在流体div里面我也有流体和固定的div。

我如何在里面制作东西.LEWY-FLUID是我想要的？

小提琴链接：http://fiddle.jshell.net/ozeczek/hu4JH/

Answer 1

试用Flexbox怎么样？现在我只能测试最新版本的浏览器，但这似乎工作得很好，可以满足您的需求：

HTML：

<div class="wrap">
  <div class="fluid wrap">
    <div class="fluid"></div>
    <div class="fixed"></div>
  </div>
  <div class="fixed"></div>
</div>

CSS：

.wrap {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.wrap div {
  height: 5em;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
   flex: 1 1 auto;
}
.fluid {
  background: tomato;
  width: 100%;
}
.fixed {
  background: beige;
  width: 150px;
  min-width: 150px;
}
.fluid.wrap .fluid {
  background: orange;
}
.fluid.wrap .fixed {
  background:tomato;
}

小提琴：http://jsfiddle.net/xdLPZ/2/

Answer 2

我检查了here并找到了解决您遇到的问题的方法。这里的主要技巧是翻转div的顺序（在你的html中首先放置固定的右div，然后是流体左边的div）。

<div class="wraper">
    <div class="prawy-fix">Czat</div>
    <div class="lewy-fluid">
        <div class="lewy-fluid-fix">Kontakt</div>
        <div class="lewy-fluid-fluid">Headshot media</div>
    </div>
</div>

然后对于你的css，设置你的固定div与float：right和你想要的宽度，你的流体divs有宽度：auto和overflow：hidden所以他们占用了剩余的空间。

演示：http://fiddle.jshell.net/5kXHR/

有关您应该使用overflow：hidden的更多信息，请阅读here.

流体分流 - 将液体留在内部液体中并固定，右侧固定

2 个答案: