两栏布局

  1. 左侧定宽,右侧自动
  • float+margin
<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
html,body{
    margin:0;
    padding: 0;
    
}
.m-box .left,
.m-box .right { 
    height: 200px; 
    line-height:200px; 
    text-align:center; 
}
.m-box .left{
    float:left; 
    width:200px; 
    background-color:#ccc;
}
.m-box .right{
    margin-left:210px;
    background-color:#666;
}
  • position+margin
<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
html,body{
    margin:0; 
    padding: 0;
}
.m-box .left,
.m-box .right {
    height: 200px; 
    line-height:200px; 
    text-align:center; 
}

.m-box .left{
    position: absolute;
    width:200px;
    background-color:#ccc; 
}
.m-box .right{
    margin-left:210px;
    background-color:#666;
}
  • float+负margin
<div class="m-box">
    <div class="cont">右</div>
</div>
<div class="m-asider">左</div>
html,body{
    margin:0; 
    padding: 0;
}
.m-box .cont,
.m-asider { 
    height: 200px;
    line-height:200px;
    text-align:center;
}

.m-box { 
    float:left; 
    width: 100%;
}
.m-box .cont {
    margin-left:210px;
    background-color: #ccc;
}
.m-asider {
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #ccc;
}
  • flex
<div id="container">
    <div id="aside"></div>
    <div id="main"></div>
</div>
  #container {
            display: flex;
            background-color: aqua;
            height: 100%;
        }
        
        #aside {
            flex: 0 0 200px;
            /* flex-grow flex-shrink flex-basis */
            background-color: rgb(52, 61, 30);
            height: 600px;
        }
        
        #main {
            flex: 1 1;
            /* flex-grow 和 flex-shrink */
            background-color: rgb(224, 115, 188);
        }
  • float+BFC方法
<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div宽 120px
  </div>
</div>
 .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
        
        .left {
            width: 120px;
            border: 5px solid #ddd;
        }
        
        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
        
        .wrapper-float-bfc {
            overflow: auto;
        }
        
        .wrapper-float-bfc .left {
            float: left;
            margin-right: 20px;
        }
        
        .wrapper-float-bfc .right {
            margin-left: 0;
            overflow: auto;
        }
  • 双inline-block方案
 <div class="wrapper wrapper-inline-block" id="wrapper">
        <div class="left">
            <p>左边固定宽度,高度不固定</p>
            </br>
            </br>
            </br>
            </br>高度有可能会很小,也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
            基本的样式是,两个div相距20px, 左侧div宽 120px
        </div>
    </div>
  .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
        
        .left {
            width: 120px;
            border: 5px solid #ddd;
        }
        
        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
        
        .wrapper-inline-block {
            box-sizing: content-box;
            font-size: 0; // 消除空格的影响
        }
        
        .wrapper-inline-block .left,
        .wrapper-inline-block .right {
            display: inline-block;
            vertical-align: top; // 顶端对齐
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .wrapper-inline-block .right {
            width: calc(100% - 140px);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用flex实现两栏布局,你可以使用flex布局的属性来实现。具体的实现方式有多种,以下是其中的一种方法: 首先,在父元素上应用flex布局属性,比如设置display为flex,这样父元素的子元素就可以通过flex属性进行布局。 然后,设置左边元素的固度,可以使用flex属性中的flex-basis来指度,比如设置为200px。 接着,设置右边元素的flex属性为1,这样它会自动填充剩余的空间。 最后,根据需要设置元素的高度和背景颜色等样式。 以下是一个使用flex实现两栏布局的示例代码: ```html <div class="outer"> <div class="left"></div> <div class="right"></div> </div> ``` ```css .outer { display: flex; height: 100px; } .left { width: 200px; height: 100%; background: lightcoral; } .right { flex: 1; height: 100%; background: lightseagreen; } ``` 这样,左边的元素会固度为200px,右边的元素会自动填充剩余的空间。你可以根据实际需求调整元素的高度和样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [实现常用的两栏布局(左侧+右侧自适应)以及三布局(圣杯布局和双飞翼布局)](https://blog.csdn.net/hzy199772/article/details/125639600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [经典布局 (flex和传统两种实现) 左右两栏式](https://blog.csdn.net/m0_49515138/article/details/129136780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值