如何使用CSS進行這種自適應布局？

Question

抱歉，我對CSS和Web東西一無所知。

我想創建一個響應式網格布局以保留這些比率：

• B.width / C.width = 5/7
• A.width = B.width
• C.height =屏幕高度的100％
• A.width = B.width

這是一個示例，其中A，B和C都應為div元素。

|--5--|---7---|
|     |       |
|  B  5   C   |
|     |       |
|-----|       |
|  A  1       |
|-----|-------| 

由於某些原因，我嘗試過的方法無法正常工作：

• 當窗口較小時，列彼此成行堆疊
• 由於“ C” div的延伸范圍，“ A” div遠低於“ B” div
• C的高度不是窗口高度的100％。

這是它的代碼

 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row-fluid"> <div class="span5"> <div class="well"> B <br/> <br/> <br/> <br/> </div> </div> <div class="span7"> <div class="well"> C <br/> <br/> <br/> <br/> <br/> <br/> </div> </div> </div> <div class="row-fluid"> <div class="span5"> <div class="well"> A </div> </div> </div> 

Answer 1

如果希望框的大小與屏幕大小無關，則只需使用百分比即可。 請注意，對於小屏幕而言，最好將塊顯示在彼此下方，這也是Bootstrap引入的網格系統的功能。

無論如何，一個簡單而純粹的CSS固定百分比解決方案：

 html, body { padding: 0; margin: 0; height: 100%; /* This is to make the height percentages work */ } .A, .B, .C { /* This is just to show the boxes */ box-sizing: border-box; border: 3px solid silver; border-bottom-color: black; border-right-color: black; } .C { width: 58.33%; /* 7/12, rounded down */ height: 100%; /* Relative to parent. Have a look at `vh` instead of % for viewport height */ float: right; /* Float to the right, so A and B will move left of C*/ } .B, .A { width: 41.66%; /* 5/12, rounded down */ } .B { height: 83.33%; /* 5/6, Relative to parent (= body) */ } .A { height: 16.66%; /* 1/6 */ } 

 <div class="C">C</div> <div class="B">B</div> <div class="A">A</div> 

Answer 2

您使用的是舊版的Bootstrap。 我相信您有您的理由。 但是，最好總是使用最新版本。

這個有可能。 將兩列視為兩列，左兩部分視為一列。

因此：

<div class="row">
    <div class="span6">
        <!-- this is where you keep the left two divs, forget about their width, they will occupy the whole space -->
        <div id="left-1"></div>
        <div id="left-2"></div>
    </div>
    <div class="span6">
        <div id="right"></div>
    </div>
</div>