Question

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

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

    }

Answer 2

我发现只有1个问题，而div与中心div重叠，here是可能的解决方案，您只需添加{{1} }到中心position: relative;

的班级

<强> CSS

div

希望它有所帮助！

Answer 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才能可靠地使用。

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

居中div和浮右div

4 个答案: