居中 div 和浮动右 div答案

【问题标题】：Centering div and a float right div居中 div 和浮动右 div
【发布时间】：2012-05-29 13:07:02
【问题描述】：

我有一个 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>

【问题讨论】：

您使用的是哪个版本的 chrome？我正在使用铬 18.0.1025.168，它看起来不错
在 chrome 19 中测试，看起来不错：link

标签： css layout centering

【解决方案1】：

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

    }

【讨论】：

【解决方案2】：

我只发现了 1 个问题，它的右边 div 与中心 div 重叠，here 是一个可能的解决方案，您只需将 position: relative; 添加到中心的类 @ 987654325@

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

希望对你有帮助！

【讨论】：

【解决方案3】：

只要内容不重叠，这对我有用：

.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。

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：