承接上文思考2
- flex布局，table布局，grid布局可以实现高度不定，左右自适应中间高度
- float布局overflow:hidden可以使中间内容垂直排布，不能左右自适应；
- 绝对定位布局只能指定固定高度，不能左右自适应；
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css布局</title> <style> html * { margin: 0; padding: 0; } section { margin-bottom: 20px; margin-top: 20px; } .left { background-color: aqua; } .mid { background-color: burlywood; } .right { background-color: coral; } ul li { list-style: none; } </style> </head> <body> <p> 题目：假设高度不定，请写出三栏布局，其中左栏右栏会根据中间内容撑开，中间自适应。 </p> <!-- flex布局 --> <section class="flex"> <style> .flex article { display: flex; } .flex-left { width: 100px; } .flex-right { width: 100px; } .flex-mid { flex: 1; } </style> <article> <div class="left flex-left"></div> <div class="mid flex-mid"> 我是用的flexbox <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="right flex-right"></div> </article> </section> <!-- table布局 --> <section class="table"> <style> .table article { display: table; width: 100%; } .table-left { display: table-cell; width: 100px; } .table-right { display: table-cell; width: 100px; } .table-mid { display: table-cell; } </style> <article> <div class="left table-left"></div> <div class="mid table-mid"> 我是用的表格布局 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="right table-right"></div> </article> </section> <!-- 网格布局 --> <section class="grid"> <style> .grid article { display: grid; width: 100%; grid-template-columns: 100px auto 100px; } </style> <article> <div class="left grid-left"></div> <div class="mid grid-mid"> 我是用的网格布局 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="right grid-right"></div> </article> </section> <!-- 浮动布局 --> <section class="float"> <style> .float { overflow: hidden; } .float-left { float: left; width: 100px; min-height: 100px; } .float-right { float: right; width: 100px; min-height: 100px; } .float-mid { overflow: hidden; } </style> <article> <div class="left float-left"></div> <div class="right float-right"></div> <div class="mid float-mid"> 我是用的浮动 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </article> </section> <!-- 绝对定位 --> <section class="position"> <style> .position article { position: relative; } .position-left { position: absolute; left: 0; width: 100px; height: 100px; } .position-right { position: absolute; right: 0; width: 100px; height: 100px; } .position-mid { position: absolute; left: 100px; right: 100px; } </style> <article> <div class="left position-left"></div> <div class="right position-right"></div> <div class="mid position-mid"> 我是用的绝对定位 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </article> </section> 思考： </body></html>效果预览：