1. 响应式布局
<!DOCTYPE html>
<html>
<head>
<title>简单的响应式布局</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 导航样式 */
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a:hover {
background-color: #ccc;
}
nav ul li a {
color: #333;
text-decoration: none;
padding: 5px;
}
/* 主要内容样式 */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
/* 脚注样式 */
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>响应式布局示例</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<section>
<h2>欢迎来到我们的网站！</h2>
<p>这是一个简单的响应式布局示例。</p>
</section>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
<script>
</script>
</body>
</html>
2. 块级布局
<!DOCTYPE html>
<html>
<head>
<title>简单的块级布局</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 主要内容样式 */
main {
display: flex;
justify-content: space-between;
padding: 20px;
}
section {
flex-basis: 48%;
background-color: #f2f2f2;
padding: 20px;
margin-bottom: 20px;
}
.left-section {
/* order 规定 section 出现的先后顺序 */
order: 1;
}
.right-section {
order: 2;
}
/* 脚注样式 */
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>块级布局示例</h1>
</header>
<main>
<section class="left-section">
<h2>左侧区域</h2>
<p>这是左侧区域的内容。</p>
</section>
<section class="right-section">
<h2>右侧区域</h2>
<p>这是右侧区域的内容。</p>
</section>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
<script src="main.js"></script>
</body>
</html>
footer 实现响应式布局
- 方法一：底部
absolute + bottom: 0;html, body { height: 100%; /* 1. 需要将页面的高度设置为浏览器可视区的高度 */ } #container { min-height: 100%; /* 2. 需要将容器的高度设置为 100% */ position: relative; /* 3. 子绝父相 */ }- 方法二：底部
margin-top: auto
#container { min-height: 100%; display: flex; /* 容器为 flex 布局 */ flex-direction: column; /* 方向为纵向，保证从上到下的文档流 */ } - 方法二：底部
3. 流式布局
<!DOCTYPE html>
<html>
<head>
<title>简单的流式布局</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 内容区域样式 */
#content {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.box {
flex-basis: 300px;
background-color: #f2f2f2;
padding: 20px;
margin: 10px;
}
/* 脚注样式 */
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>流式布局示例</h1>
</header>
<div id="content">
<div class="box">
<h2>盒子 1</h2>
<p>这是盒子 1 的内容。</p>
</div>
<div class="box">
<h2>盒子 2</h2>
<p>这是盒子 2 的内容。</p>
</div>
<div class="box">
<h2>盒子 3</h2>
<p>这是盒子 3 的内容。</p>
</div>
<div class="box">
<h2>盒子 4</h2>
<p>这是盒子 4 的内容。</p>
</div>
</div>
<footer>
<p>版权所有 © 2023</p>
</footer>
<script src="main.js"></script>
</body>
</html>
4. 定位布局
<!DOCTYPE html>
<html>
<head>
<title>简单的定位布局</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 容器样式 */
#container {
position: relative;
width: 500px;
height: 300px;
background-color: #f2f2f2;
}
/* 盒子样式 */
.box {
position: absolute;
padding: 20px;
background-color: #333;
color: #fff;
}
#box1 {
top: 20px;
left: 20px;
}
#box2 {
bottom: 20px;
right: 20px;
}
#box3 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="container">
<div
id="box1"
class="box"
>盒子 1</div>
<div
id="box2"
class="box"
>盒子 2</div>
<div
id="box3"
class="box"
>盒子 3</div>
</div>
<script src="main.js"></script>
</body>
</html>
5. 多列布局
<!DOCTYPE html>
<html>
<head>
<title>简单的多列布局</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 容器样式 */
#container {
display: flex;
justify-content: space-between;
padding: 20px;
}
/* 列样式 */
.column {
flex-basis: 30%;
background-color: #f2f2f2;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="column">
<h2>列 1</h2>
<p>这是列 1 的内容。</p>
</div>
<div class="column">
<h2>列 2</h2>
<p>这是列 2 的内容。</p>
</div>
<div class="column">
<h2>列 3</h2>
<p>这是列 3 的内容。</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
6. 网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 1700px;
height: 500px;
border: 10px solid gray;
margin: 100px auto;
display: grid;
/* 13 列，每列列宽为 100px */
grid-template-columns: repeat(13, 100px);
/* 4 行，每行高度为 100px */
grid-template-rows: repeat(4, 100px);
/* 单元格间距 垂直 水平 */
grid-gap: 10px 10px;
/* 整体网格居中 */
place-content: center center;
}
.box>div {
background: pink;
}
.box1 {
/* 横向网格线起始位置 */
grid-row: 1/3;
/* 纵向网格线起始位置 */
grid-column: 12/14;
}
.box2 {
grid-row: 1/2;
grid-column: 10/12;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<!-- <div>49</div> -->
<!-- <div>50</div>
<div>51</div>
<div>52</div> -->
</div>
</body>
</html>
7. 浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after {
content: '';
display: block;
clear: both;
}
.container {
background: lightcoral;
width: 100%;
margin: 0 auto;
}
.aside {
float: left;
background: lightblue;
color: white;
width: 300px;
}
.main {
float: right;
background: lightgreen;
color: white;
width: 900px;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nihil illum, eum ratione, at nisi qui temporibus vero assumenda ex quo! Soluta veniam sit omnis dolore possimus deleniti nesciunt mollitia autem facilis ipsa consequatur incidunt amet, vero rerum maxime ea adipisci magni. Architecto, id. Quos, harum assumenda! Dolorum voluptate possimus in. Sapiente, provident veritatis deserunt perspiciatis repellendus minus voluptatem modi harum delectus aspernatur eum molestias veniam adipisci numquam assumenda ratione consequatur quibusdam eaque ea dolorum impedit debitis ullam! Id, unde aspernatur rem eos, eius deleniti, tenetur doloribus odio beatae sint ipsum quisquam tempore aut saepe? Corrupti assumenda nobis amet fuga cum minus rem aperiam voluptatibus tempore! Atque pariatur reprehenderit cum itaque molestiae autem nulla ea ex, facilis id laborum praesentium repellat officiis quo corporis possimus iste. Cum incidunt sunt dicta corrupti deleniti porro, perspiciatis ad doloremque sit beatae omnis iusto provident ipsa corporis at culpa enim eaque totam magni inventore aspernatur officiis consequatur. Quo commodi id dignissimos voluptatibus ipsum dolore. Ea ab dolor atque rerum officiis neque impedit odio autem molestias officia enim accusamus suscipit odit nostrum minima, incidunt animi nam magnam consequuntur iste accusantium. Molestiae voluptate aliquid id, quod quos velit nihil ullam blanditiis beatae, possimus ab asperiores doloremque aperiam sunt doloribus perspiciatis sint tempora quaerat tenetur! Sed reprehenderit impedit architecto eius quam laborum, ducimus eligendi sit molestias optio nulla at aperiam reiciendis dolorum incidunt, nostrum accusamus explicabo quos quisquam illo nisi aut. Aliquam, accusamus at, ex libero placeat laboriosam dolorum tempore voluptates, obcaecati quibusdam doloribus. Esse eum voluptates provident, impedit sunt quia? Aut veniam quos maiores numquam rerum voluptatem accusantium vitae beatae quo, debitis sequi voluptatibus corrupti eaque soluta provident consequuntur facilis aperiam autem excepturi distinctio rem! Omnis, aut. Expedita nesciunt ipsum earum repudiandae sapiente dignissimos blanditiis, mollitia veritatis vitae adipisci ea non dolore ex quisquam numquam suscipit optio perferendis, dolores nemo officiis! Possimus sit laboriosam quos dolorem impedit, fuga eveniet perferendis maiores eos? Similique ipsam corrupti ratione cum suscipit. Vel, illum. Illum omnis eum similique? Odit, maiores. Minima facere ullam beatae eum necessitatibus sit ratione, architecto dicta eligendi quis inventore, dolores distinctio recusandae ut aliquid animi hic placeat corporis vel sint? Commodi, dolore, doloribus quam similique, assumenda suscipit atque consequuntur iste repellendus aliquid qui officia excepturi fugiat tempora impedit odio ab reprehenderit porro aspernatur repudiandae ducimus ut id. Illum, nisi? Aspernatur, dolorem? Qui natus dolorem dolor mollitia dicta animi consequuntur, dolores molestias commodi quae libero architecto accusamus? Consequatur, et harum aut perferendis temporibus explicabo, qui esse minus, unde ea cupiditate. Molestias iste sequi commodi qui ad officiis deleniti adipisci amet unde nostrum excepturi necessitatibus aliquid reiciendis autem, perferendis consequuntur temporibus natus laboriosam nemo cumque, error voluptatibus voluptates aliquam. Magni earum impedit magnam nam, libero possimus optio commodi ipsum quaerat aliquid ratione autem atque consequatur! Laudantium quae iure dolorem at! Impedit laborum, iure illo cum modi sed facere fugit autem ipsa, ullam possimus exercitationem delectus, repudiandae tenetur! Vel eos qui quasi aut ipsa sunt illo voluptate, sapiente tenetur vero aliquam aliquid quas. Eaque, quae cupiditate consequatur nihil impedit expedita odit corrupti ut hic? Dolorem debitis labore itaque quaerat quibusdam, distinctio atque mollitia quo odit aliquid delectus voluptates molestiae ipsum in, vero porro sapiente sint! Ducimus et architecto deleniti fugit obcaecati provident laborum officia animi quod! Omnis optio perferendis saepe, aspernatur earum eveniet, doloribus beatae praesentium itaque at in dolore quaerat est error totam molestias architecto illum, dolores dicta accusantium molestiae veritatis tempore? Assumenda quod dicta cupiditate iste corporis quo dolorum facere consequatur delectus voluptates! Eveniet exercitationem nostrum, praesentium assumenda animi voluptate beatae nobis officia vitae culpa quas veritatis totam ipsum voluptatem? Culpa cum veniam libero blanditiis! Aspernatur, provident similique, amet aperiam ea debitis eaque ex alias labore tempore ab facere incidunt corporis, accusamus porro ipsa rem doloremque id placeat culpa nesciunt. Rerum, dolore? Et, odio vel? Perspiciatis pariatur dolorem, veniam, minima cupiditate aspernatur cum modi dicta in necessitatibus repellat mollitia consectetur. Dignissimos, fugiat minima odio aperiam nesciunt consequuntur id odit sed omnis pariatur, tenetur commodi accusantium nam quis amet? Quisquam laboriosam quod id dolorum architecto repudiandae odit, molestiae dicta mollitia? Obcaecati minima adipisci, dicta ratione repudiandae eaque neque cupiditate aperiam hic, temporibus repellat qui corrupti mollitia ipsa quam? Ad, illum aperiam suscipit mollitia nemo veniam expedita magni, quis, sapiente sit sed. Nostrum eveniet, aperiam asperiores iusto eum ipsum saepe tenetur expedita debitis repellat ex sed eos corporis id quo, voluptate dolorem ad, totam assumenda tempora facilis! Enim quibusdam facere vel necessitatibus praesentium, debitis asperiores accusantium aperiam ullam, quas officiis tempore delectus expedita consequuntur illo quasi odit architecto officia adipisci. Laudantium, velit placeat. Quaerat a quae facere quis, eos neque hic deleniti dolores accusamus quas voluptatum enim odit porro beatae. Labore dolorem aliquam dolores, ab dolor illo eveniet architecto! Doloremque fugiat deserunt, dignissimos molestias quisquam quis repudiandae porro? Facilis modi quibusdam, eaque assumenda enim quo deserunt! Dolorum officia, consequatur recusandae, nostrum a itaque, dolores nesciunt doloribus quas quam fugit quasi eum blanditiis? Magnam fugiat saepe, delectus, quasi quisquam nihil cum soluta deserunt, commodi molestias nostrum explicabo esse autem. Commodi officia laborum nam. Aspernatur beatae, autem aut, nesciunt esse reprehenderit deleniti quis perspiciatis eveniet impedit nam distinctio quae laudantium est voluptate minus ut tempore. Aut deserunt, sapiente, fugiat accusamus ipsum quo obcaecati labore ex nisi quibusdam perspiciatis quos doloremque molestias dignissimos provident impedit doloribus tempore voluptas quasi quod officiis. Ullam, iste eligendi, velit in quidem earum nisi illo inventore exercitationem dignissimos corporis deleniti minus architecto praesentium similique laudantium ad quia. Ex voluptates necessitatibus porro. Possimus error, minus ipsa nostrum praesentium deleniti aut ducimus eveniet velit accusantium quae, sunt corrupti, omnis doloribus fugiat atque aliquam nisi optio! Sit debitis natus aut esse expedita, delectus minima aspernatur aliquid nostrum, error labore tempora odit quo ad velit beatae eaque et quia sapiente, iusto nihil ipsum! Veritatis, exercitationem vel minus nostrum excepturi temporibus sunt debitis aperiam quaerat voluptatibus quod dicta quam aspernatur totam. Magnam voluptates beatae necessitatibus voluptate! In nam culpa, aspernatur laudantium quidem repellat eaque delectus dolores consequatur expedita, similique ex suscipit aliquam totam esse sequi repellendus debitis, blanditiis accusamus? Possimus, hic eligendi!</aside>
<div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quae ratione cupiditate excepturi? Quidem atque deleniti beatae ut sit sunt culpa quaerat doloremque qui ipsa ex perspiciatis, commodi nemo nobis quod aut laboriosam officia doloribus provident excepturi. Vero, porro quod error, nobis minus quis reiciendis possimus ipsam odit veniam neque saepe eos quibusdam ab voluptas, a nulla. Recusandae fugiat fugit eveniet quos consequuntur impedit sed fuga magnam, harum laborum rerum eius tempore, neque voluptatum! Sequi maxime sint quia aspernatur quisquam excepturi magnam, corporis, vero ut, aut consequuntur sed ipsa asperiores fugit. Tempora nulla perspiciatis earum, vel esse reiciendis. Aliquam cumque totam fugiat velit doloremque nulla adipisci ea harum, placeat fuga autem nam dolore necessitatibus, alias ipsam officiis voluptates tempore a corrupti minus magni numquam incidunt neque. Voluptas repellat obcaecati rem eveniet. Enim nam dolor praesentium explicabo dignissimos ullam quam aperiam optio odio in eaque illum distinctio et, ea sit error ipsam quos sint ducimus voluptatum facilis debitis accusantium molestiae sunt! Aliquid fugiat possimus quod est vero dolorum, incidunt debitis totam eum cupiditate illo obcaecati quisquam ut recusandae veritatis ad molestiae hic reprehenderit at repudiandae laborum officia adipisci ullam earum? Consequatur officia maiores incidunt deserunt commodi, cumque totam ullam sunt cupiditate sequi rem impedit aspernatur ratione doloribus vitae sed corrupti sint, quae, eaque tempora voluptates laborum voluptas fugiat fuga? Maiores odit a, porro sit eum labore soluta magnam necessitatibus hic veritatis placeat laboriosam sequi? Atque aperiam, quisquam adipisci aut repudiandae quae animi maiores autem dicta perspiciatis quod deleniti. Quaerat dolor nesciunt natus dolores ullam dolorem veniam dolore repellendus est, libero blanditiis commodi. Vero dolorum eius nostrum ratione amet omnis consectetur ipsa inventore perferendis a dolores ex repudiandae vitae eligendi magnam, natus cumque officiis blanditiis soluta mollitia quibusdam. Sapiente iste maxime totam, rem quasi veritatis corporis expedita deserunt qui, officiis nemo consequatur. Accusamus ullam incidunt deleniti. Soluta, deserunt odit cupiditate, accusamus deleniti animi voluptate non officia optio dolores quos provident repellat eaque quae quo sit labore molestiae, iure quas reiciendis aspernatur porro officiis quibusdam. Fugiat, soluta, sint qui laboriosam modi nisi ipsa eligendi aspernatur totam sunt, sapiente quibusdam odio non autem nobis facilis cumque tempore ipsam. Velit eum dolores debitis sint exercitationem officia, dolor praesentium quae, nostrum illo, voluptatum sit maxime. Porro voluptatibus illum, nemo doloremque repudiandae iste molestiae deleniti enim excepturi rem quasi obcaecati adipisci odit explicabo laborum hic placeat, molestias optio beatae voluptatem. Libero, suscipit recusandae, ullam unde at, laudantium quidem aliquid accusamus repudiandae consequuntur a quo voluptates praesentium. Nostrum maiores, animi qui nihil optio explicabo enim ad laborum tempora! Repellat nam voluptates, maiores commodi ex hic est ab dolor sint illum ea, architecto esse totam delectus rerum nisi animi fuga laborum atque blanditiis a molestias aliquid quae. Totam, quam ab doloribus corrupti impedit suscipit amet tenetur? Velit repudiandae eveniet aut minus quia earum dolorem mollitia explicabo corrupti, iusto rem suscipit asperiores provident. Assumenda vel nesciunt autem quibusdam illo aut atque repudiandae dolorum commodi nisi sapiente voluptatem possimus, eum cumque ullam asperiores pariatur suscipit, sequi repellendus quos. Perferendis magni, maiores autem, itaque minima tempore distinctio cumque amet quos voluptatem culpa dolorem iure, rem nemo? Praesentium, voluptatem quis? Saepe iste repudiandae sapiente, rem exercitationem, ad deserunt ducimus nesciunt voluptas ipsa reiciendis commodi beatae voluptates voluptate unde facere sit aliquid explicabo cupiditate asperiores suscipit odit aut! Quasi quidem, blanditiis rem quia nisi ipsa iusto quod commodi, eos hic numquam incidunt impedit perspiciatis dicta esse! Dicta, ducimus deserunt dignissimos molestias est beatae in laborum quam obcaecati perferendis ipsum, voluptatibus dolor unde sed quod ea. Atque ad doloremque quibusdam perferendis facere excepturi quasi velit dignissimos, fuga repellat? Minus officiis, consequuntur aut natus ipsum, unde recusandae quam pariatur expedita, provident repellendus magni possimus doloribus cum. Animi, culpa voluptate totam voluptatem, at odio velit eveniet dolores vel alias quibusdam ab hic tempora! Consequatur nam commodi qui sint aliquam nulla corporis voluptatibus officiis, similique eaque fuga quae, voluptate animi ullam cumque vitae placeat repudiandae porro beatae assumenda saepe magni labore ratione? Sapiente velit quo, quasi id obcaecati dolore neque saepe quibusdam omnis est suscipit corporis eum molestiae at excepturi tenetur doloremque enim recusandae eligendi doloribus natus. Totam rem veniam magni quidem reiciendis at ipsa recusandae in a nihil. Odit repudiandae qui ipsa iure assumenda, dolorum inventore a dolor minima cum distinctio magni, animi suscipit enim dicta quae corrupti quisquam dolores alias ratione. Asperiores ipsa, error quas veniam nobis fuga porro necessitatibus! Soluta nostrum, ipsum praesentium exercitationem optio illum ducimus expedita itaque a sapiente aut tempora vel perspiciatis autem facere nisi fugit maiores eius! Illum dignissimos sunt aperiam ea dolorem veritatis, corporis sequi porro earum harum voluptatem nemo. Facilis a numquam aliquid, omnis facere libero maiores at maxime ex dolor quae placeat animi veritatis sed harum quis cupiditate voluptatem aspernatur eius voluptates. Laborum necessitatibus quae consequuntur nemo dolore dolor facere velit. Vel perspiciatis dolor unde omnis maxime dolore nemo nam quae nisi quod voluptatem at earum sequi sunt ipsa eligendi expedita, quas impedit soluta ab saepe! Officia ducimus impedit iste, reprehenderit odit perspiciatis beatae fuga illum id, distinctio aliquid perferendis. Placeat perferendis, nesciunt minima, quisquam, magnam at illo molestiae totam aliquid earum doloribus in. Laudantium accusamus perferendis quod. Laboriosam inventore modi eligendi fugit possimus vel dicta dolor, quos asperiores accusamus, provident debitis quidem blanditiis, ipsam placeat earum! Perferendis saepe sint, dolores odio nam delectus, hic dolore, accusamus sed dolor laboriosam totam. Neque cupiditate saepe dignissimos, rerum, alias magni consectetur, distinctio odit illo modi impedit. Nisi porro officiis dolores vel molestiae, eum, aperiam iure fugit libero enim blanditiis praesentium! Velit dicta doloribus dolorum ullam facilis, id consectetur, tempora vero quibusdam molestias reprehenderit? Odio quod harum expedita aperiam veritatis ab nam aut numquam et, odit, mollitia similique quidem, sit deserunt. Voluptatum nostrum mollitia aperiam nemo tenetur doloribus quis eum cum quam aspernatur dicta dolorem consectetur explicabo velit exercitationem adipisci necessitatibus animi nesciunt eius earum cupiditate repudiandae, ipsum alias. Pariatur nulla perferendis ab quia hic, commodi, facilis esse tenetur quisquam omnis architecto cupiditate impedit! Natus ullam adipisci nulla distinctio iusto, consectetur non, minima, harum blanditiis reprehenderit illum quidem perspiciatis repellat quibusdam.</div>
</div>
</body>
</html>
将 .main 样式去掉 float，加上 overflow: hidden; 可以创建 bfc，使得左侧定宽，右侧自适应宽度。
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
