Question

我有两个div，右边一个必须向右浮动，宽度为100px。现在我希望左边的一个扩展占据所有空间，直到正确的开始。

有人可以帮忙吗？

我在这里有一个jsfiddle：http://jsfiddle.net/brfbugnL/

HTML：

<div class="wrap">
    <div class="left">
        Hi hi
    </div>
    <div class="right">
        right
    </div>
</div>

CSS：

.wrap {
    width:100%;    
}

.left {
    display:inline-block;
    border: 2px solid;
    margin-right:110px; 
}

 .right {
     width:100px;
     float:right;
     border: 2px solid red;
}

Answer 1

您可以使用display:table-cell和display:table来获取您所追求的内容：

.wrap {
    width:100%;
    display:table;
}
.left {
    display:table-cell;
    border: 2px solid;
}
.right {
    display:table-cell;
    width:100px;
    border: 2px solid red;
}

<div class="wrap">
    <div class="left">Hi hi</div>
    <div class="right">right</div>
</div>

Answer 2

对左div 使用 width：calc（100％ - 108px）属性。
从左div 中移除 margin-right：110px 和 display：inline-block 属性;并添加 float：left 。

额外的8px用于左右两侧的边框宽度的div

检查以下代码：

＆＃13;

.wrap {
    width:100%;    
}

.left {
    float:left;
    border: 2px solid;
     width:calc(100% - 108px)
   
    
}

.right {
    width:100px;
    float:right;
    border: 2px solid red;
}

＆＃13;

<div class="wrap">
    <div class="left">
        Hi hi
    </div>
    <div class="right">
        right
    </div>
</div>

＆＃13;

Answer 3

这里有三个选项

为您的html提供流体布局，即以百分比（％）
将容器的宽度收缩到右边和左边div与其边距的计算总和
使用表格单元格显示结构

Answer 4

使用

width: calc(100% - 108px);

在你左边的Div上。将边框移回100px时更改108px。

两个div彼此相邻 - 将左侧扩展为全宽

4 个答案: