兩個div並排在另一個div內

我有以下簡單的html代碼。兩個div並排在另一個div內

.body-content { 
 
    width: 100%; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 

 
.left-menu { 
 
    background-color: red; 
 
    float: left; 
 
    width: 50px; 
 
} 
 

 
.right-container { 
 
    background-color: blue; 
 
    width: 100%; 
 
} 
 

 
.middle-view { 
 
    width: 70%; 
 
    float: left; 
 
    background-color: blueviolet; 
 
} 
 

 
.right-view { 
 
    width: 30%; 
 
    float: left; 
 
    background-color: burlywood; 
 
}

<div class="body-content"> 
 
    <div class="left-menu"> 
 
    abc 
 
    </div> 
 
    <div class="right-container"> 
 
    <div class="middle-view"> 
 
     def 
 
    </div> 
 
    <div class="right-view"> 
 
     ghi 
 
    </div> 
 
    </div> 
 
</div>

我得到以下結果：

但我想 '高清' 和 'GHI' 並排。

我沒有太多使用HTML和CSS的經驗，但我認爲中間視圖和右視圖一起會填充右側容器（70％+ 30％）。但正如我所看到的左菜單（50px）的寬度對它有影響。

來源

2017-02-10 Ashot Khachatryan

下面是解..

.body-content { 
 
    width: 100%; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    float:left; 
 
} 
 

 
.left-menu { 
 
    background-color: red; 
 
    float: left; 
 
    width: 50px; 
 
} 
 

 
.right-container { 
 
    background-color: blue; 
 
    width:calc(100% - 50px); 
 
    float:left; 
 
} 
 

 
.middle-view { 
 
    width: 70%; 
 
    float: left; 
 
    background-color: blueviolet; 
 
} 
 

 
.right-view { 
 
    width: 30%; 
 
    float: left; 
 
    background-color: burlywood; 
 
}

<div class="body-content"> 
 
    <div class="left-menu"> 
 
    abc 
 
    </div> 
 
    <div class="right-container"> 
 
    <div class="middle-view"> 
 
     def 
 
    </div> 
 
    <div class="right-view"> 
 
     ghi 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-10 13:17:07

@ gabe3886這工作，因爲.right容器是浮動左側。問題是，如果你想浮動它，你必須指定寬度，以便它是全角。 – Armin

@Armin雖然我知道它爲什麼會起作用，但只是給出代碼並不能幫助人們輕鬆地從答案中學習。我建議你的信息構成了補充代碼的答案的一部分。 – gabe3886

@ gabe3886我同意答案應該包含更多信息和附加解釋。但我通常更願意發表評論，而不是向下投票，即使後者似乎更高效:) – Armin

.body-content { 
 
    display: flex;    /* forces children to same row */ 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
.left-menu { 
 
    width: 50px; 
 
    background-color: red; 
 
} 
 
.right-container { 
 
    display: flex;    /* forces children to same row */ 
 
    flex: 1;     /* consume remaining space on the row */ 
 
    background-color: blue; 
 
} 
 
.middle-view { 
 
    width: 70%; 
 
    background-color: blueviolet; 
 
} 
 
.right-view { 
 
    width: 30%; 
 
    background-color: burlywood; 
 
}

<div class="body-content"> 
 
    <div class="left-menu">abc</div> 
 
    <div class="right-container"> 
 
    <div class="middle-view">def</div> 
 
    <div class="right-view">ghi</div> 
 
    </div> 
 
</div>

來源

2017-02-10 13:23:37

兩個div並排在另一個div內

回答

相關問題