1

我正在尝试安排网格布局。

缩小时最后一个 div 移动。当我放大时，右侧面板和最后一个内容 div 之间还会出现一条白线。

我的 CSS 和布局是否存在严重错误？

干杯，欧文

#container {
    position: relative;
    width: 827px;
    height: 580px;
    float: left;
}

.side-pannel {
    position: relative;
    width: 60px;
    height: 580px;
    background-color: #ba55d3;
    float: left;
}

.two-item-column {
    position: relative;
    float: left;
}
.column-border-middle {
    border-right: 1px solid black;
}

.item1 {
    width: 206px;
    height: 288px;
    background: #666; 
}
.item2 {
    width: 206px;
    height: 291px;
    background: #666;
    border-top: 1px solid black; 
}

<div class="side-pannel" id="left-pannel"></div>
<div id="container">
    <div class="two-item-column" >
        <div class="item1 column-border-middle"></div>
        <div class="item2 column-border-middle"></div>
    </div>
    <div class="two-item-column" >
        <div class="item1 column-border-middle"></div>
        <div class="item2 column-border-middle"></div>
    </div>
    <div class="two-item-column" >
        <div class="item1 column-border-middle"></div>
        <div class="item2 column-border-middle"></div>
    </div>
       <div class="two-item-column" >
        <div class="item1"></div>
        <div class="item2"></div>
    </div>   
</div>
<div class="side-pannel" id="right-pannel"></div>
4

2 回答 2

2

如果我正确理解了您的问题，这就是您的输出应该是什么。

CSS 应为

#container {
    position: relative;
    width: 88%;
    height: 580px;
    float: left;
}
.side-pannel {
    position: relative;
    width: 6%;
    height: 580px;
    background-color: #ba55d3;
    float: left;
}
.two-item-column {
    position: relative;
    width: 25%;
    float: left;
}

此外，从和中删除width属性/属性。.item1.item2

于 2013-03-02T07:17:38.400 回答
1

添加宽度two-item-column将修复它。如果它不是用于布局的其他部分，则无需使其位置相对：

.two-item-column {
    float: left;
    width: 207px;
}

.two-item-column:last-child {
    width: 206px;
}
于 2013-03-02T07:13:27.797 回答