CSS adaptive layout: How to implement CSS width adaptation?

Today’s web page layout needs to be adapted to various screens, so it is necessary to implement adaptation so that the content in the web page can be fully displayed. Therefore, today’s article will introduce to you about CSS width auto- Adaptable content. Let’s talk in detail about how to implement CSS width adaptation in CSS adaptive layout.

Recommended related articles:
1.How to achieve high adaptability of css? A simple way to adapt css height to content
2.What are the common adaptive layouts in CSS
Related video recommendations:
1.CSS Video Tutorial-Jade Girl Heart Sutra Edition

We often see pages like this. The left (or right) side is a fixed navigation or menu bar, and the other side will adaptively change its size as the browser zooms. This is actually the automatic width. Implementation of adaptation.

There are two most common implementation methods in css width adaptation, One is a two-column layout, and the other is a three-column layout

Let’s do it below Let’s briefly introduce these two methods respectively.

1. CSS width adaptive two-column layout:

Let’s take the right width as fixed and the left width as adaptive as an example:

1. The fixed width area is floating, and the adaptive area does not set a width but sets margin

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

#sidebar {
  float: right; width: 300px;
}#content {
  margin-right: 300px;
}

Note:

The right side is always fixed, and the left side is based on the remaining screen space. Adaptable size.

But in fact this method has limitations, that is, the sidebar must be before the content in the html structure.

2. Use float and margin together

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">
    <div class="contentInner">
       自适应区    </div>
  </div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

#content {
  margin-left: -300px; float: left; width: 100%;
}#content .contentInner{
  margin-left:300px;
}#sidebar {
  float: right; width: 300px;
}

Explanation: In this way, the actual width of contentInner is the screen width-300px.

3. Use absolute positioning in the fixed width area and set margin in the adaptive area

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  </div>

#wrap{
  position:relative;
}#content {
  margin-right:300px;
}#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

4. Use display:table to achieve

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

#wrap{
  display:table;
  width:100%;
}#content {
  display:table-cell;
}#sidebar {
 width:300px;
  display:table-cell;
}

Note: This method is not compatible with IE7 and below browsers, because IE7 does not recognize the setting of display to table.

2. CSS width adaptive three-column layout:

1. Fixed-width three-column layout

    <div class="div0">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>

*{
    padding: 0;
    margin: 0;
}
.div0{
    width: 800px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    margin: 50px auto;
    border: 2px solid #E51414;/*添加边框只为结果更直观*/
}
.left{
    width: 200px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #6E6C8A;
    float: left;/*设为左浮动*/
    text-align: center;
}
.middle{
    width: 430px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #806155;
    float: left;/*设为左浮动*/
    margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/
    text-align: center;
}
.right{
    width: 150px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #8F9068;
    float: right;/*设为右浮动*/
    text-align: center;
}

2. Three-column layout with fixed width on the left and right and adaptive width in the middle

 <!--<div class="div0">-->
 <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
<!--</div>-->

*{
    padding: 0;    
    margin: 0;}
    /*.div0{
    width: 800px;
    height: 500px;
    margin: 50px auto;
    position: relative;
    border: 2px solid #E51414;
}
可以不要这个父元素div0（即默认父元素为body），如果有，需将这个父元素设置为相对定位*/
.left{
    width: 200px;    
    height: 500px;    
    background: #6E6C8A;    
    position: absolute;    
    top: 0;    l
    eft: 0;
    /*设为绝对定位并且与其父元素的top、left距离都为0*/
    text-align: center;
    }
.middle{
    height: 500px;    
    background: #806155;    
    margin: 0 160px 0 210px;
    /*左右各加10px使得三列之间有间隙*/
    text-align: center;
    }
    .right{
        width: 150px;    
        height: 500px;    
        background: #8F9068;    
        position: absolute;    
        top: 0;    
        right: 0;
        /*设为绝对定位并且与其父元素的top、right距离都为0*/
    text-align: center;
    }

Explanation: When the width of the left and right divs is fixed and the width of the middle div is unknown, the three-column layout cannot be achieved using floating . Use absolute positioning to achieve a three-column layout: you need to set the left and right elements to absolute positioning, and set the left and right margin values ​​of the middle element to the width of the right element and the left element respectively. You can achieve a three-column layout without wrapping the parent element. If there is a parent element, you need to set the parent element to relative positioning. (For positioning content, please refer to css manual)

Related recommendations:

How does CSS implement div width adaptive according to content_html/css_WEB-ITnose

css implements fixed width on the right side and adaptive width on the left side_html/css_WEB-ITnose

The above is the detailed content of CSS adaptive layout: How to implement CSS width adaptation?. For more information, please follow other related articles on the PHP Chinese website!