HTML/CSS : Creating and positionning 5 blocs

Question

我正在尝试在我的页面中定位 5 个区 block 。

我实际上想要 3 列:

• 第一列:两个区域(收藏夹和 session )
• 第二栏:(最近的新闻和推文)
• 第三栏:其他收藏栏

像这样:

但是我在定位第三列时遇到了问题。

这是我的 HTML 代码:

<div class="containerBloc" >
    <div class="box-1">
        <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu"><span id="textMenu">Favorites</span></div>
    </div>
    <div class="box-2">
        <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_feed.png" id="imgIntoMenu"><span id="textMenu">Recent news</span></div>
    </div>
    <div class="box-5">
        <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu"><span id="textMenu">Favorites</span></div>
    </div>
    <div class="box-3">
        <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_calendar_month.png" id="imgIntoMenu"><span id="textMenu">Upcoming meetings</span></div>
    </div>
    <div class="box-4">
        <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu"><span id="textMenu">Tweets de</span></div>
    </div>
</div>

和 CSS:

.containerBloc {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 150px;
}
.box-1, .box-2, .box-3, .box-4 {
    float: left;
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B0B0B0;
}
.box-1, .box-2 {
    height: 200px;
}
.box-1, .box-3 {
    width: 30%;
}
.box-2, .box-4 {
    width: 60%;
}
.box-5 {
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B0B0B0;
    float : right;
    height : 100%;
    width : 40%;
}

.box-menu {
    background-color: #EFEFEF ;
    height : 40px;
    color : #B0B0B0;
    border-bottom: 1px solid #B0B0B0;
}

#imgIntoMenu {
    margin-left : 10px;
    margin-top : 4px;
}

#textMenu {
    margin-left: 10px;
    position: absolute;
    margin-top: 13px;
}

我的完整代码在这里:http://jsfiddle.net/mzV85/

非常感谢您的帮助。

Answer 1

这个 FIDDLE 应该让你开始。CSS 代码中有一些整理工作要做。

重点是使用 Div 来包装您的列。将添加的宽度设置为 100% 并将它们 float 到左侧。

HTML:

<div class="containerBloc">
    <div class="col">
        <div class="box-1">
            <div class="box-menu">
                <img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu" /> <span id="textMenu">Favorites</span>

            </div>
        </div>
        <div class="box-2">
            <div class="box-menu">
                <img src="src/ui_dashboard/img/ic_action_feed.png" id="imgIntoMenu" /> <span id="textMenu">Recent news</span>

            </div>
        </div>
    </div>
    <div class="col">
        <div class="box-3">
            <div class="box-menu">
                <img src="src/ui_dashboard/img/ic_action_calendar_month.png" id="imgIntoMenu" /><span id="textMenu">Upcoming meetings</span>

            </div>
        </div>
        <div class="box-4">
            <div class="box-menu">
                <img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu" /><span id="textMenu">Tweets de @__Erwan</span>

            </div>
        </div>
    </div>
    <div class="col">
        <div class="box-5">
            <div class="box-menu">
                <img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu" /><span id="textMenu">Favorites</span>

            </div>
        </div>
    </div>
</div>

CSS:

.col{
    float:left;
    width:33%;
    margin:0;
    padding:0;
}

.containerBloc {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 150px;
}
.box-1, .box-2, .box-3, .box-4 {
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B0B0B0;
}
.box-1, .box-2 {
    height: 200px;
}
.box-1, .box-3 {
    width: 98%;
}
.box-2, .box-4 {
    width: 98%;
}
.box-5 {
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B0B0B0;
    float : right;
    height : 100%;
    width : 98%;
}
.box-menu {
    background-color: #EFEFEF;
    height : 40px;
    color : #B0B0B0;
    border-bottom: 1px solid #B0B0B0;
}
#imgIntoMenu {
    margin-left : 10px;
    margin-top : 4px;
}
#textMenu {
    margin-left: 10px;
    position: absolute;
    margin-top: 13px;
}