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 }

我在这里制作了一个显示HTML的JS Fiddle。如果展开页面，您将看到列并排浮动，然后在浏览器缩小时进行换行。

Answer 1

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

如何在三列液体页面中停止列包装？

1 个答案: