居中div和浮動右分區

我有一個DIV，即使在瀏覽器調整大小時，我也想始終保持在屏幕中央。另外還有一個浮動的右側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>

來源

2012-05-23 Bilal

您使用的是什麼版本的Chrome瀏覽器？我使用鉻18.0.1025.168，它看起來很好 –

在鉻19測試它，看起來不錯：[鏈接]（http://jsfiddle.net/wLGj7/1/） – Luis

.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-23 01:35:15 KurvaF9

我發現只有1的問題，它的右邊重疊div中心div，here是一個可能的解決方案對此，你只需要添加position: 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-23 02:31:39 Luis

這個工作對我來說，只要內容無重疊：

.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-23 02:45:59 Anthony

試試這個

<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-23 04:37:15

居中div和浮動右分區

回答

相關問題