彼此相鄰的兩個div - 將左側擴展為全寬

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

1. 使用width：calc（100％ - 108px）屬性為左div 。
2. 刪除margin-right：110px並顯示： left div的 inline-block屬性; 並向其添加float：left 。

額外的8px用於左右兩邊的邊框寬度

檢查以下代碼：

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

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

Answer 3

你有三個選擇

• 為你的html提供流暢的布局，即以百分比（％）分配
• 將容器的寬度收縮到使用其邊距計算右和左div的總和
• 使用表格單元格顯示結構

Answer 4

采用

width: calc(100% - 108px); 

在你左邊的Div。 將邊框移回100px時更改108px。