来自 Web前端 2020-04-29 15:35 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

右侧主要内容则用margin-left留出左侧栏的宽度,

时间: 2019-12-20阅读: 81标签: 布局

演示demo
其中有老生常谈的float澳门三合彩票,方法,BFC方法,也有CSS3的flex布局与grid布局。
常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中的新型布局flex layoutgrid layout

html

html代码:

首先创建基本的HTML布局和最基本的样式。

<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
div div固定宽度/div div自适应区域/div/div
<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div宽 120px
  </div>
</div>

1. float+margin-left

.main{
 border: 1px solid black;
  overflow: hidden;//清除浮动
}
.left{
  width: 200px;
  background: green;
  float: left;

}
.right{
  margin-left: 200px;
  background: red;
}

left设为float: left,脱离文档流。right是块级元素会"无视"浮动元素,它的宽度随着适应父元素的宽度,此时margin-left为left元素的宽度。

1.浮动+margin

基本的样式是,两个盒子相距20px, 左侧盒子宽

2. absolute+margin-left

.main{
 border: 1px solid black;

}
.left{
  width: 200px;
  background: green;
  position: absolute;
}
.right{
  margin-left: 200px;
  background: red;
}

另外一种让两个block排列到一起的方法是对左侧盒子使用position: absolute的绝对定位。这样,右侧盒子也能无视掉它

第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。

120px,右侧盒子宽度自适应。基本的CSS样式如下:

3. 浮动和负边距实现

html

<div class="main">
    <!--右边盒子先渲染-->
    <div class="right">
        <div class="right-inner">right-inner</div>
    </div>
    <div class="left">left</div>
</div>

css

.main {
            border: 1px solid black;
        }

        .left {
            float: left;
            width: 200px;
            background: green;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 100%;
        }

        .right-inner {
            margin-left: 200px;
            background: yellow;
        }

可以不用指定左边宽度(即不用计算)的方法有:

.left{ float: left;}.right{ margin-left: 200px;}
.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

4. flex

.main{
 border: 1px solid black;
 display: flex;
}
.left{
  width: 100px;
  background: green;
}
.right{
  background: red;
  flex: 1;
}

只须将右边盒子flex:1,意为宽度自动伸缩

2.绝对定位

下面的代码都是基于这套基本代码做覆盖,通过给容器添加不同的类来实现效果。

5. float+BFC

.main{
 border: 1px solid black;
overflow: auto;
}
.left{
  float: left;
  background: green;
  margin-right: 20px;
}
.right{
  background: red;
  overflow: hidden;
}

由于触发了BFC的元素不会与浮动元素重叠这条特性,这种情况下,只需要为左侧的浮动盒子设置margin-right,就可以实现两个盒子的距离了。而右侧盒子是block级别的,所以宽度能实现自适应

链接

https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/

本文由澳门三合彩票发布于Web前端,转载请注明出处:右侧主要内容则用margin-left留出左侧栏的宽度,

关键词: