Question

对不起，我是一个带有CSS和网络内容的总菜鸟。

我想创建一个响应式网格布局来保留这些比率：

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       |
|-----|-------|

由于以下几个原因，我尝试过的功能不起作用：

当窗口很小时，列会以行的形式相互叠加
“A”div远低于“B”div，因为“C”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固定百分比解决方案：

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

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>

如何使用CSS制作此响应式布局？

2 个答案: