0

ブラウザーのサイズが変更された場合でも、常に画面の中央に保持したい DIV があります。また、中央の DIV と重なってはならないフローティング右 DIV もあります。

Chrome では、中央が左側で画面からはみ出したり、右側のフローティング DIV が中央の DIV に重なったりして、多くの問題が発生しています。

CSS

.center {
    border-style: solid;
    border-width: 1px;
    background-color: #808080;
    width: 650px;
    height: 200px;
    margin: auto;   
}
.right {
    border-style: solid;
    border-width: 1px;
    background-color: #808080;  
    width: 200px;
    height: 200px;  
    float: right;   
}
body {
    border-style: dashed;
    border-width: 1px;
}

HTML

<div class="right">right</div>
<div class="center">center</div>
4

4 に答える 4

0

コンテンツが重ならない限り、これは私にとってはうまくいきます：

.right {
 float: right;
 min-width: 0;   
 border: 1px solid blue;
 box-sizing: border-box; 
}

.center {
    width: 50%;
    margin: 0 auto;
    border: 1px solid green;
}

それが問題である場合は、ページが縮小するにつれてコンテンツのフォントサイズが縮小するオプションを検討する必要があると思います。これは、js でのみ確実に利用できると思います。

于 2012-05-23T02:45:59.123 に答える
0 
    .center
    {
        border-style: solid;
        border-width: 1px;
        background-color: #808080;
        width: 50%;
        height: 200px;
        margin:0 auto;


    }

    .right
    {
        border-style: solid;
        border-width: 1px;
        background-color: #808080;

        width: 25%;
        height: 200px;

        float: right;

    }
于 2012-05-23T01:35:15.443 に答える
0

これを試して

<div class="center">center</div>
<div class="right">right</div>


.center {
    border-style: solid;
    border-width: 1px;
    background-color: #808080;
    width: 650px;
    height: 200px;
    margin: auto;   
    display:block;

}
.right {
    border-style: solid;
    border-width: 1px;
    background-color: #0f0;  
    width: 200px;
    height: 200px;  
    float: right;  
    margin-top:10px;    
    display:block;
}
body {
    border-style: dashed;
    border-width: 1px;
}
于 2012-05-23T04:37:15.327 に答える
0

私は 1 つの問題だけを見つけました。その右が centerにdiv重なっています。ここに考えられる解決策があります。中心のクラスに追加する必要がありました。divposition: relative;div

CSS

.center
{
    border-style: solid;
    border-width: 1px;
    background-color: #808080;
    width: 650px;
    height: 200px;
    margin: 0 auto;
    display: block;
    position: relative;
}
.right
{
    border-style: solid;
    border-width: 1px;
    background-color: #808080;
    width: 200px;
    height: 200px;
    float: right;
    display: block;
}
body
{
    border-style: dashed;
    border-width: 1px;
}​

それが役に立てば幸い！

于 2012-05-23T02:31:39.193 に答える