-1

我有 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/

4

2 回答 2

2

我在这里检查并找到了解决您遇到的问题的方法。这里的主要技巧是翻转 div 的顺序（将固定的右 div 首先放在 html 中，然后是流动的左 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 和您想要的宽度，并将您的流体 div 设置为具有 width:auto 和 overflow:hidden 以便它们占用剩余空间。

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

有关为什么应该使用溢出：隐藏的更多信息，请阅读此处。

于 2013-08-07T16:36:08.100 回答
2

试试 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/

于 2013-08-07T15:50:28.797 回答