DIV对齐和定位问题

Question

我在这个DIV对齐和定位上遇到了困难。我有parent DIV width=980px(yellow)和孩子DIV＆＃39; s 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媒体查询来显示响应式布局，该布局将显示＆＃34;绿色＆＃34; div＆＃34; Red＆＃34;如果窗口大小低于一定宽度，则为div。

实施例

JSFiddle

Answer 2

这是你想要的 http://jsfiddle.net/ZZ5AD/4/

<div>
    <div class="parent">
        <div id="left" class="child">
                Yo
        </div>
        <div id="right" class="child">
            <div class="baby">
                lol
            </div>
            <div class="baby">
                lol
            </div>
            <div class="baby">
                lol
            </div>
        </div>
    </div>
</div>

CSS

.parent{
    width: 900px;
    height: 400px;
    background: yellow;
    padding: 10px 10px 10px 0px;
}
.child{
    float: left;
    margin: 0px 0px 0px 10px;
    height: 100%;
}
#left{width:600px;     background: red;}
#right{width:280px;     background: green;}
.baby{
    height: 30%;
    width: auto;
    margin: 10px 10px 0px 10px;
    background: white;
}

Answer 3

我不知道我是否理解你的问题以及这是否有助于你 如果在您的问题中，您指的是黄色div不包括右侧的项目 你可以尝试这个代码用于父元素内容（溢出：隐藏）

#content {
    margin: 30px 0 50px;
    padding: 5px 50px;
    width: auto;
    height:auto;
    background:yellow;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    opacity:0.8;
    text-align:justify;
    overflow:hidden;
}

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

Answer 4

<强> HTML

<div id="main">
    <div id="leftd">
    </div>
    <div id="rightd">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<强> CSS

#main {
    width:980px;
    background:yellow;
    padding:20px;
    float:left;
}

#leftd {
    background:red;
    height:400px;
    width:600px;
    float:left;
}

#rightd {
    background:green;
    height:400px;
    width:360px;
    float:right;
}

#rightd div
{
    height:100px;
    background:white;
    margin:20px;
}