Question

我正试图在我的页面中定位5个集团。

我希望事实上有3列：

第一栏：两个集团（收藏和会议）
第二栏:(新闻和推文）
第三栏：其他收藏栏

像这样：

enter image description here

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

这是我的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代码中有一些可以做的事情。

重点是使用Divs来包裹你的列。要将宽度设置为100％并将它们浮动到左侧。

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

Answer 2

您应该使用像Bootstrap这样的响应式网格系统。

但是，如果我理解正确，您只是想将三列布局组合在一起，就像这样 - http://jsfiddle.net/webbymatt/ngxA6/

<div class="container">
  <div class="col-1">
    <div class="child">
        Favourites
    </div>
    <div class="child clearfix">
        Meetings
    </div>
  </div>

   <div class="col-2">
    <div class="child">
        Recent
    </div>
    <div class="child clearfix">
        Tweets
    </div>
  </div>

   <div class="col-3">
    <div class="child">
        Favourites
    </div>
  </div>
</div>

Answer 3

布局正在破坏，因为您使用的百分比宽度加起来超过100％。如果减小列的宽度，则可以正常工作。

http://jsfiddle.net/mzV85/15/

CSS：

.box-1, .box-3 {
    width: 25%;
}
.box-2, .box-4 {
    width: 50%;
}
.box-5 {
    width : 19%;
}

Answer 4

做了一个小提琴。请检查http://jsfiddle.net/mzV85/21/。请正确检查容器的width。

Answer 5

问题：您的标记在一行中有box-1，box-2和box-5 .....计算它们的组合宽度，它来了＆gt; 100％;这就是为什么你的第三个盒子没有对齐

查看此演示 http://jsfiddle.net/mzV85/10/（将该框对齐一行，而不是完成设计）

.box-1, .box-2 {
    height: 200px;
    width:20%; /* do some changes here */
}
.box-1, .box-3 {
    width: 30%;/* do some changes here */
}

当组合宽度＆lt; = 100％

时，可以使用宽度和来获取它

HTML / CSS：创建和定位5个集团

5 个答案: