html - 如何停止三列液体页面中的列换行？

Question

几个星期以来，我一直在努力解决这个问题，但就是无法在调整浏览器大小时让这三列页面停止换行。我最近尝试使用百分比而不是像素作为边距，但这没有任何区别。

CSS代码在这里

#wrapper 
{ 
       background : #0066FF ;
       color : white ;
       height : 687px ;
       width : 100% ;
       max-width : 1620px ;
       font : 1.4em "Arial", sans-serif ;
       margin : auto ;
       border : 3px solid black ;
       border-top : none ;
       overflow : hidden ;
       position : relative
}

#header 
{ 
         height : 90px ;
         text-align : center ;
         color : black ; 
         background : #66CCFF ;
         margin : 100px auto 0 ;
         clear : both ;
         border : 3px solid black ; 
         border-bottom : 2px solid #0066FF ;
         width : 1620px 
}

#header h1 
{
        font-weight : bold ;
        font-size : 3em ;
        padding : 20px 0   
}



p.paragraphs 
{
        margin : 0 12px 0
}


#left 
{ 
        float : left ;
        width : 15% ;
        min-width : 180px ;
        height : 660px ;
        background-color : #66CCFF ;
        padding : 5px ;
        margin-right : 1.5% ;
        position : relative
}

#content 
{ 
     float : left ;
     background-color : #66CCFF ; 
     color : black ;
     height : 660px ; 
     width : 60% ;
     max-width : 1140px ;
     margin-right : 1.5% ;
     padding : 5px ;
     overflow : auto
}


#right 
{ 
       float : right ;
       position : relative ;
       background-color : #66CCFF ;
       color : black ;
       width : 20% ;
       min-width : 220px ;
       height : 660px ;
       padding : 5px 
}

#right p { margin-top : 20px }

我做了一个JS Fiddle此处显示 HTML。如果展开页面，您将看到列如何并排 float 然后随着浏览器缩小而换行。

Answer 1

您不能在列上设置最小宽度，因为您的包装器没有最小宽度。此外，您应该添加 *{box-sizing: border-box}，因为您使用的是百分比宽度而不考虑填充和边距。您还应该清除页脚前的 float 。 fiddle :https://jsfiddle.net/88wbhv9y/2/