Question

我有一个DIV, 即使在浏览器变小时, 我总是要在屏幕中央保留这个 DIV 。还有一个浮动右侧的 DIV, 它不应该与中心 DIV 重叠。

铬正在引发很多问题要么中心在左侧从屏幕上掉下来要么右漂浮 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

我仅找到了一个问题, 右侧的 div 将中心重叠为 div , , http://jsfiddle.net/wLGj7/3/" rel="nofollow" >在这里是一个可能的解决方案, 您只需要将 位置: 相对; 添加到中心类别 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;
}

希望它能帮上忙!

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 可以可靠地使用 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;
}

友情链接