Question

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

缩小时最后一个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>

Answer 1

如果我正确理解了您的问题，this就是output应该是的。

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属性/属性。

Answer 2

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

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

.two-item-column:last-child {
    width: 206px;
}

CSS div在缩放时移动

2 个答案: