CSS div 在缩放时移动

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

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