当缩放时CSS div移动

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

来源

2013-03-02 ojhawkins

您已将固定值赋予您的'div's。 – hjpotter92 2013-03-02 06:58:55

我应该瞄准哪个div去除宽度/高度？ – ojhawkins 2013-03-02 07:09:14

添加宽度two-item-column将修复它。而且也没有必要使位置相对它，如果它是不适合你的布局的其他部分：

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

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

来源

2013-03-02 07:13:27 Sheric

我可以问为什么这解决了这个问题？ – ojhawkins 2013-03-02 07:15:47

还有一件事，放大垂直边框时我仍然看到白线。 – ojhawkins 2013-03-02 07:17:38

我不确定自己为什么，但是设置一个宽度，我们知道确切的值可以解决其他标签的可能问题：P也许是因为某些未设置的边距，填充或项目边框。尝试为每个元素设置边距和填充。也许它修复了垂直空间。 – Sheric 2013-03-02 07:37:36

如果我理解正确你的问题，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属性/属性。

来源

2013-03-02 07:17:38 hjpotter92

当缩放时CSS div移动

回答

相关问题