Question

我完全冻结脑部，我很乐意帮助解决它。

我有2个div元素。左右叫：

.left {width:50%;float:left;}
.right {width:50%;float:left;}

我要做的是使用320px宽度固定正确的一个，如果浏览器缩小则用左边的那个固定。

.left {width:auto}
.right {width:320px}

但是我无法弄清楚如何让它工作，因为正确的元素在左边的元素下直线跳跃并且宽度为100％。

我希望它的行为如下：

[------- LEFT -------] [--- RIGHT ---]

当我缩小brwoser窗口时：

[--- LEFT ---] [--- RIGHT ---]

提前致谢，杰克

Answer 1

这对你有用。你走在正确的轨道上

.left {width:320px; height:20px; background-color:red; float:left}
.right {width:auto; height:20px; background-color:blue; float:left, margin-left:320px}

DEMO

Answer 2

你可以使用jQuery。

<强> HTML：

<div id="left"></div>
<div id="right"></div>

<强> CSS：

#left{
    position:absolute;
    top:0;
    left:0;
    width:auto;
    border:1px solid black;
    height:100px;
}
#right{
    position:absolute;
    top:0;
    right:0;
    width:320px;
    border:1px solid black;
    height: 100px;
}

<强> jQuery的：

$("#left").width($(window).innerWidth()-$("#right").outerWidth());

<强> DEMO

Answer 3

只需将float:right;添加到.right div即可。

<div style="width: 320px; float:right">foo</div>
<div style="width: auto">bar</div>

（width: auto当然不是必需的。）

Answer 4

css最近有一项功能允许你这样做，它被称为 flexbox ：

  display: flex;

在没有JS的情况下，在flexbox之前没有办法实现这一点。

检查http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 和http://html5please.com/#flexbox

一个有效的演示http://jsfiddle.net/jakub_g/s5jAB/

Answer 5

您可以使用此纯n简单css，无JS和旧版浏览器兼容解决方案

优点：您的右侧Div左侧

<强> HTML ：

<div class="outer">
    <div class="left"> </div>
    <div class="right"> </div>
</div>

css ：fiddle

.outer {
  position: relative;
  background: #eee;
}
.left{
  margin-right: 320px;
  background: grey;
}
.right{
  width: 320px;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  background: yellow;
}

如何在另一个具有固定宽度时使div元素自动适应

5 个答案: