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 に答える