最终我们需要的效果是:
它的布局结构式这样的:
代码实现说明:
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ width: calc(450px + 17px); height: 400px; background-color: greenyellow; overflow: auto; } .container .inner-container{ overflow: hidden; width: 450px; background-color: #ccc; padding: 10px; padding-bottom: 0px; } .container .inner-container>div{ width: 100px; height: 100px; background-color:#D43F3A; float: left; margin-right: 10px; margin-bottom: 10px; } .container .inner-container>div:nth-child(4n){ margin-right: 0; } </style> </head> <body> <div class="container"> <div class="inner-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> </div> </div> </body> </html>
另一种效果:
它的布局结果是:
代码:
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ width: 490px; height: 400px; background-color: #ccc; overflow: auto; overflow-x: hidden; } .container .inner-container{ width: 490px; padding: 10px 30px; } .container .inner-container>div{ width: 100px; height: 100px; background-color:#D43F3A; float: left; margin-right: 10px; margin-bottom: 10px; } .container .inner-container>div:nth-child(4n){ margin-right: 0; } </style> </head> <body> <div class="container"> <div class="inner-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> </div> </div> </body> </html> </body> </html>
总结:
1 通过加一个中间层来处理出现的滚动条的影响
2 chrome下的滚动条的宽度是17px
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:css中内容出现滚动时不影响布局解决办法-创新互联
网页路径:https://www.cdcxhl.com/article10/edsgo.html
成都网站建设公司_创新互联,为您提供网站制作、建站公司、网站收录、定制开发、网站建设、App设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联