DIV對齊和定位問題

Question

我在進行DIV對齊和定位時遇到了困難。 我有一個parent 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 。

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