css-the elements of the same row are highly uniform

One: Flex Dafa steps

1. Set up an external containerdisplay: flex;
2. Set internal containeralign-items: stretch;

Principle

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

Example

<style>/*1.    Set the external container display:flex;*/. container{Display:flex;    }. Container > Div:nth-child (1) {background:pink;    }. Container > Div:nth-child (2) {background:yellow;    }. Container > Div:nth-child (3) {background:red; }/*2.        Set internal container align-items:stretch;*/. box{Align-items:stretch;        width:100px;    margin-left:20px; }</style><div class= "Container" > <div class= "box" >  <p>img1 120*200</p> </div> <div class=" box "> <i    MG src= "https://via.placeholder.com/120x300" width= "100px" > <p>img2 120*300</p> </div> <div class= "box" >  &LT;P&GT;IMG3 1 20*150</p> </div> </div><script>//Click to expand the height of the area can also trigger the event DOCUMENT.QUeryselectorall ('. Box '). ForEach ((d) = {D.onclick = function (e) {alert (e.target.innertext); }}) </script>

Two: Padding compensation method

Search the Internet to find this method actually has this big on the noun.

Steps

1. To set the outer container to exceed the hidden:overflow: hidden;
2. Set the internal container a very large padding-bottom and negative margin-bottom:margin-bottom:-10000px; padding-bottom:10000px;

Principle

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom
The Margin-bottom property of the CSS is used to set the bottom margin of the element, allowing negative values to be set. A positive value will let it be farther from the adjacent block relative to the normal flow, and the negative value will make it closer.

My understanding is to use Padding-bottom to open the outer container (the outer container is set Overflow:hidden; BFC is created), and then the negative margin-bottom does not change the actual height of the element, only changes the height of the container when it is calculated. This allows the height of the outer container to be calculated as the highest internal container height.

Example

<style>/*1.    Set the external container overflow:hidden;*/. container{Overflow:hidden;    }. Container > Div:nth-child (1) {background:pink;    }. Container > Div:nth-child (2) {background:yellow;    }. Container > Div:nth-child (3) {background:red; }/*2.        Set the internal container margin-bottom:-10000px;    padding-bottom:10000px;        * *. box{margin-bottom:-10000px;        padding-bottom:10000px;        width:100px;        Float:left;    margin-left:20px; }</style><div class= "Container" > <div class= "box" >  <p>img1 120*200</p> </div> <div class=" box "> <i    MG src= "https://via.placeholder.com/120x300" width= "100px" > <p>img2 120*300</p> </div> <div class= "box" >  <p&gtIMG3 120*150</p> </div> </div><script>//Click Compensated area can also trigger event Document.queryselectorall ('. Box        '). ForEach ((d) = {D.onclick = function (e) {alert (e.target.innertext); }}) </script>

Three: Table layout

Equivalent to using <table>

Steps

1. Set up an external containerdisplay: table;
2. Set internal containerdisplay: table-cell;

Principle

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

Example

<style>/*1.    Set the external container display:table;*/. container{display:table;    }. Container > Div:nth-child (1) {background:pink;    }. Container > Div:nth-child (2) {background:yellow;    }. Container > Div:nth-child (3) {background:red; }/*2.        Set internal container display:table-cell;*/. box{Display:table-cell; /*vertical-align:top;        The default is bottom*/width:100px; /*margin-left:20px; Invalid table layout */}</style><div class= "container" > <div class= "box" >  <p>img1 120*200</p> </div> <div class=" box "    >  <p>img2 120*300</p>        </div> <div class= "box" >  &LT;P&GT;IMG3 120*150</p> </div> </div><script>//Click on the extended Height area to also trigger event Document.queryselectorall ('. Box '). ForEach ((d) = {D.onclick = f        Unction (e) {alert (e.target.innertext); }}) </script>

css-elements of the same row are highly uniform