1. The most common and simplest layout is a fixed width on the left and adaptive on the right.
This is achieved by using float+margin-right:
eg:
<body>
<div id="wrapper">
<div class="left">left fixed width, height not fixed </div>
<div class="right">This may be higher or lower than the left.Width needs to be adaptive.</div>
</div>
</body>
<style> .right { margin-left: 150px; border: 5px solid #ddd; } .left { float: left; width: 120px; border: 5px solid #ddd; } #wrapper { overflow: hidden; padding: 15px 20px; border: 1px dashed #ff6c60; } </style>
2. Double inline-block scheme
Note: The vertical-align property sets the vertical alignment of the element.
The box-sizing attribute allows you to define specific elements that match an area in a specific way.
For example, if you need to place two bordered boxes side by side, you can set box-sizing to "border-box".This allows the browser to render a box with the specified width and height and place the border and margin inside the box
The calc() function is used to dynamically calculate length values.
Note that a space is required before and after the operator, for example, width: calc(100% - 10px); //to indicate that the width set is 10px less than 100%.
Any length value can be calculated using the calc() function;
The calc() function supports'+', -', *', /'operations;
The calc() function uses standard mathematical operation priority rules;
eg:
<body> <div id="wrapper"> <div class="left" >Left fixed width, height not fixed <br> <br> <br> <br> <br> <br> <br> The sofa starts fighting </div> <div class="right" >The content here may be higher or lower than the left.Width needs to be adaptive.</div> </div> </body>
<style> .right { width: calc(100% - 140px); border: 5px solid #ddd; display: inline-block; vertical-align: top; box-sizing: border-box; } .left { width: 120px; border: 5px solid #ddd; display: inline-block; vertical-align: top; box-sizing: border-box; } #wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; } </style>
3. Double float scheme
eg:
<body> <div id="wrapper"> <div class="left" >Left fixed width, height not fixed <br> <br> <br> <br> <br> <br> <br> The sofa starts fighting </div> <div class="right" >The content here may be higher or lower than the left.Width needs to be adaptive.</div> </div> </body>
<style> .right { float: left; margin-left: 20px; width: calc(100% - 140px); border: 5px solid #ddd; box-sizing: border-box; } .left { float: left; width: 120px; border: 5px solid #ddd; box-sizing: border-box; } #wrapper { overflow: auto; padding: 15px 20px; border: 1px dashed #ff6c60; box-sizing: content-box; } </style>
4. BFC+float scheme
How to trigger a box's bfc
position:absolute; display:inline-block; float:left/right; overflow:hidden;
eg:
<body> <div id="wrapper"> <div class="left">Left fixed width, height not fixed <br> <br> <br> <br> <br> <br> <br> The sofa starts fighting </div> <div class="right">The content here may be higher or lower than the left.Width needs to be adaptive.</div> </div> </body>
<style> .right { overflow: auto; border: 5px solid #ddd; } .left { margin-right: 20px; float: left; width: 120px; border: 5px solid #ddd; } #wrapper { overflow: auto; padding: 15px 20px; border: 1px dashed #ff6c60; } </style>