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

我发现只有 1 个问题，它与div中心重叠div，这是一个可能的解决方案，你只需要添加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-23T02:31:39.193 回答
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 回答