Div框没有浮动到我想要的位置

时间:2014-01-07 01:47:02

标签: css

我在将我希望它们放在我的网站上时遇到问题。

我希望底部框“联盟计划”位于“您的订单”框下方。如果有人能告诉我要编辑什么,我真的很感激。

这是CSS代码:

小左框:

.small-white-box {
    background-color: #ffffff;
    border: 1px solid #d9dee1;
    border-radius: 3px;
    width: 230px;
    min-height: 200px;
    float: left;
    padding: 10px;
    margin-top: 10px;
    color: #37a6ef;
}

大中间盒:

.large-white-box {
    background-color: #ffffff;
    border: 1px solid #d9dee1;
    border-radius: 3px;
    width: 665px;
    min-height: 650px;
    float: left;
    padding: 10px;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 14px;
}

2 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/theStudent/c42kU/3/

请告诉我这是否适合您!

<强> HTML

<div class="content">

<div class="left">    
    <div class="small-white-box"><h2 class="title">Your Orders</h2></div>   
    <div class="small-white-box"><h2 class="title">Affiliate Program</h2>
    </div>
</div>

<div class="right">
    <div class="large-white-box"><h2 class="title">Place Orders</h2>
    Test
    </div>
</div>      
</div>

<强> CSS

.content{
    width:100%;
}
.left{
    float:left;
    width: 230px;
    margin: 0 10px 0 0;
}
.right{
    float:left;
    width: 665px;
}
.large-white-box {
    background-color: #ffffff;
    border: 1px solid #d9dee1;
    border-radius: 3px;
    width: 665px;
    min-height: 650px;
    padding: 10px;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 14px;
    float:left;
    display:box;

}
.small-white-box {
    background-color: #ffffff;
    border: 1px solid #d9dee1;
    border-radius: 3px;
    width: 230px;
    min-height: 200px;
    float: left;
    padding: 10px;
    margin-top: 10px;
    color: #37a6ef;
}

答案 1 :(得分:0)

div.col-white-box
    div.small-white-box
        ......
    div.small-white-box
        ......
div.large-white-box
    ......

css规则

.col-white-box {
    float: left;
    width: 252px;
}
.small-white-box {
    background-color: #ffffff;
    border: 1px solid #d9dee1;
    border-radius: 3px;
    min-height: 200px;
    padding: 10px;
    margin-top: 10px;
    color: #37a6ef;
}