Implementation of CSS fixed layout on both sides and adaptive layout in the middle

Analyze four common methods and principles: floating, floating embedded div, positioning, and flex.

float

<style type="text/css">
    .wrap {background: #eee; padding: 20px; }
    p {margin: 0; }
    .left {width: 200px; height: 200px; float: left; background: coral; }
    .right {width: 200px; height: 200px; float: right; background: lightblue; }
    .middle {margin: 0 200px; background: lightpink; }
</style>

<div class="wrap">
    <p class="left">I am on the left</p>
    <p class="right">I am on the right</p>
    <p class="middle">I was last in line, but I ran to the middle</p>
</div>

principle:

Floating elements and non-floating elements are not in the same three-dimensional space. If the floating element is not clear, the element below it will float up.
The height of the floating element is 0. The floating box level is higher than block -level horizontal box and lower than the inline/inline-block horizontal box.

Floating inline div

<style type="text/css">
    .wrap {background: #eee; padding: 20px; }
    p {margin: 0; }
    .left {width: 200px; height: 200px; float: left; background: coral; margin-left: -100%;}
    .right {width: 200px; height: 200px; float: left; background: lightblue; margin-left: -200px;}
    .middle {width: 100%; height: 200px; float: left; background: lightpink; }
    span{
        display: inline-block;
        margin: 0 200px;
    }
</style>

<div class="wrap">
    <p class="middle">
        <span class="inner">
            I'm in the middle 
    </p>
    <p class="left">I am on the left</p>
    <p class="right">I am on the right</p>
</div>

principle:

All three elements are floated, with the theme element filling up 100% of a row, and using negative margin to place the elements on the left and right.
Add another child element inside the theme element with margin: 0 200px to prevent the content from being covered by the two floating elements on the left and right.

position

<style type="text/css">
    .wrap {background: #eee; position: relative;}
    p {margin: 0; }
    .left {width: 200px; height: 200px; background: coral; position: absolute;left: 0; top: 0;}
    .right {width: 200px; height: 200px; background: lightblue; position: absolute; right: 0; top: 0;}
    .middle {height: 200px; background: lightpink; margin: 0 200px;}
</style>

<div class="wrap">
    <p class="middle">I am in the middle, I use margin to offset the space occupied by the two positioned elements on the left and right</p>
    <p class="left">I am on the left, I am a positioned element</p>
    <p class="right">I am on the right, I am a positioned element</p>
</div>

principle:

The left and right elements can be positioned anywhere.
The middle element uses margin: 0 200px to prevent the content from running under the two positioned elements on the left and right and being covered.

flex

<style type="text/css">
    .wrap {background: #eee; display: flex}
    p {margin: 0; }
    .left {width: 200px; height: 200px; background: coral; }
    .right {width: 200px; height: 200px; background: lightblue; }
    .middle {height: 200px; background: lightpink; flex: 1;}
</style>

<div class="wrap">
    <p class="left">I am on the left</p>
    <p class="middle">I am in the middle, flex: 1 automatically occupies the remaining space</p>
    <p class="right">I am on the right</p>
</div>

principle:

In flex layout, child elements are arranged horizontally by default.
flex: 0 1 auto -> default, the space occupied does not follow the parent to expand, but follows the shrinkage, the original width
flex: 1 1 auto -> auto, the space occupied follows the parent to expand and shrink, and the original width
flex: 0 0 auto -> none, the space occupied does not follow the parent to expand, nor does it follow the shrinkage, the original width
flex: 1 1 1 -> auto, the space occupied follows the parent to expand, and at the same time follows the shrinkage, and automatically fills the remaining space

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: JavaScript to achieve progress bar effect

>>: 202 Free High Quality XHTML Templates (2)