html - 使用 CSS 创建 3 列的 Div 标准

Question

我是新的网站设计师。我想创建一个分为 3 列的网站，当我使用 Firefox 和 Chrome 缩小我的网站时，它没有任何问题；但是，当我使用 Safari 缩小时，右 div 和中间部分之间有一些空白。请帮我解决它。我的 CSS 脚本如下:

div#left{
    float: left;
    width: 205px;
    max-width:205px;
    background-color:#999;
    height:200px;
}

div#middle{
    float:left;
    max-width:555px;
    width: 555px;
    background-color:#366;
}
div#right{
    float: right;
    width: 200px;
    max-width:200px;
    background-color:#F00;
    height:200px;
}
div#content{
    width: 960px;
    margin-top: 0 auto;
    white-space:nowrap;
}

我的 HTML

       <div id="content">
                         <div id="left"> 
                            Test
                         </div>
                         <div id="middle">
                          Middle
                         </div>
                         <!--white space here when zoom out in safari-->
                         <div id="right">Right</div>  
             </div>

如何用 safari 修复？

Answer 1

因为浏览器的宽度增加了，你的中间向左浮动，而你的右边向右浮动，这导致中间出现空白。.尝试让你的右边也向左浮动

div#right{
    float: left;
    width: 200px;
    max-width:200px;
    background-color:#F00;
    height:200px;
}

但这会在右侧留下一个空白区域。

您可以通过将左侧和右侧设为百分比来解决此问题。以便它采用其父级的长度。

div#left{
    float: left;
    width: 25%;
    background-color:#F00;
    height:200px;
}
div#middle{
    float: left;
    width: 50%;
    background-color:#F00;
    height:200px;
}
div#right{
    float: left;
    width: 25%;
    background-color:#F00;
    height:200px;
}