问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

固定宽度3列页面布局如何实现？

头像
johnman
    939

    新手求助

    1.想进行固定宽度三列的布局，需求如下图所示
    页面默认宽度为1024。由header、div1、div2、div3组成，各组件宽度固定
    当用户将浏览器的缩小，例如将宽度调整为600px，div1不变，div3因为overflow而不可见，div2因为overflow而部分可见，同时页面下方有横向滚动条
    希望用div实现

    图片描述

    2.我的代码抽象如下：
    发现缩小窗口时，没有滚动条、div3一直出现附着在右边。请问各位大佬有没有好的示例或者方法

    HTML

    <!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <title>三栏-固定宽度布局</title>    
</head>   
<body>   
    <div id="app">   
        <div class="header" style="width: 1024px; height: 60px;"></div>
        <div class="div1" style="width: 200px; height: 328px; top: 60px;"></div>
        <div class="div2" style="width: 700px; height: 328px; left: 180px; top: 60px;"></div>
        <div class="div3" style="width: 124px; height: 328px; top: 60px;"></div>
    </div>   
</body>   
</html>

    CSS

    html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background-color: #e8eaf4;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.header{
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    z-index: 25;
    background-color: #fff;
    border-bottom: 2px solid #daddf7;
}

.div1{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 2px solid #daddf7;
    -webkit-box-shadow: 2px 0px 4px 0px rgba(44,75,248,0.2);
    box-shadow: 2px 0px 4px 0px rgba(44,75,248,0.2);
}

.div2 {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.div3{
    position: absolute;
    right: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
}
    css
    阅读 1.9k
    2 个回答
    得票最新
    头像
    Dopp
      1.1k1519
      ✓ 已被采纳

      把三个div包裹起来，父级加个固定宽度

      <!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <title>三栏-固定宽度布局</title>    

    <style>
        *,html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .content {
            width: 1024px;
            font-size:0;letter-spaceing:-4px;
        }
        .content div{
            display: inline-block;
        }
        .div1,.div3 {
            
            background: #000;
        }
        .div2 {
            background: #ccc;
        }

    </style>
</head>   
<body>   
    <div id="app">   
        <div class="header" style="width: 1024px; height: 60px;"></div>
        <div class="content">
            <div class="div1" style="width: 200px; height: 328px; "></div>
            <div class="div2" style="width: 700px; height: 328px; "></div>
            <div class="div3" style="width: 124px; height: 328px; "></div>
        </div>
    </div>   
</body>   
</html>
      头像
      goblin_pitcher
        5901311
        <!DOCTYPE html>
<html lang="zh-cn">
<head>    
    <meta charset="UTF-8">   
    <title>三栏-固定宽度布局</title>   
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body{
            overflow-x: auto;
        }
        #app{
            width: 1024px;
        }
        .header{
            height: 60px;
            background-color: lightblue;
        }
        .content{
            height: 328px;
            display: flex;
        }
        .content>div{
            height: 100%;
        }
        .content>div:nth-child(odd){
            background-color: lightgray
        }
        .content>div:nth-child(even){
            background-color: lightpink;
        }
    </style>
</head>
<body>
        <div id="app">   
        <div class="header" style=""></div>
        <div class="content">
            <div class="div1" style="width: 200px;"></div>
            <div class="div2" style="width: 700px;"></div>
            <div class="div3" style="width: 124px;"></div>
        </div>
    </div>  
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题