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

Question

抱歉，我完全是个菜鸟 css 和网络内容。

我想创建响应式网格布局以保留这些比例：

B.width/C.width = 5/7
A.width = B.width
C.height = 100% screen height
A.width = B.width

这是一个示例，其中 A、B 和 C 都应该是 div 个元素。

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

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

当 window 较小时，列在行中相互堆叠
“A”div 远低于“B”div，因为“C”div 延伸了多远
C 的高度不是 window 高度的 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 的旧版本。我相信你有你的理由。但最好使用最新的。

这是可能的。将两列视为两列，将左侧的两个部分视为一列。

因此：

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

Answer 2

如果您希望这些框无论屏幕大小如何都表现相同，您可以简单地使用百分比。不过请注意，对于小屏幕，将块显示在彼此下方可能会更好，这也是 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>

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

How do I make this responsive layout with CSS?

css