javascript - DIV对齐和定位问题

Question

我在这个 DIV 对齐和定位上遇到了困难。我有一个 父 DIV width=980px(yellow) 和子 DIV:left width=600px(red) 和 right width=280px(green)。在右边的 DIV 中，我想显示图像的垂直排列(白框)。这里是示例图片:

到目前为止，这是我的代码:JSFiddle

提前谢谢您!

Answer 1

问题 1 - 使用 CSS 定位 div

例子

JSFiddle

CSS

<style>
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Helvetica;
}
.yellow {
    width: 980px;
    height: 600px;
    background: yellow;
    padding: 10px;
}

.red {
    float: left;
    width: 600px;
    display: block;
    height: 100%;
    background: red;
    margin: 0px 10px 0px 0px;
}

.green {
    float: right;
    width: 280px;
    height: 100%;
    background: green;
    padding: 10px;
}

.white {
    background: white;
    height: 180px;
    margin: 0 0 10px 0;
}
</style>

HTML

<div class="yellow">
<div class="red"></div><!-- end red -->
<div class="green">
<div class="white"></div>
<div class="white"></div>
<div class="white"></div>
</div><!-- end green -->
</div><!-- end yellow -->

---

问题 2 - 使用 CSS3 实现响应式布局

要回答您的附加问题，您可以使用 CSS3 媒体查询实现响应式布局，如果窗口大小低于特定宽度，该布局将在“红色”div 的顶部显示“绿色”div。

例子

JSFiddle .