两列自适应布局的两种办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
margin: 0%;
padding: 0%;
}
body{
margin: 50px;
}
.row{
background-color: black;
width: 100%;
font-family: 'Times New Roman', Times, serif;
text-align: center;
margin: 20px;
color: white;
position: relative;
/* 空出右侧300px，出现黑色区域,*/
box-sizing: border-box;
padding-right: 300px;
}
.row .side{
box-sizing: border-box;
background-color: rgb(231, 109, 38);
width: 300px;
height:500px;
padding: 20px;
/* 对side进行绝对定位，就不会占用文档流，main就会自动上移*/
position: absolute;
/*填充黑色区域*/
right: 0%;
}
.row .main{
width: 100%;
height:500px;
background-color: rgb(238, 146, 93);
}
.row .side p{
font-size: 15px;
margin: 10px;
padding-bottom: 10px;
}
.row .main p{
font-size: 20px;
margin: 10px;
padding-bottom: 50px;
}
.row .main h1{
font-size: 82px;
margin: 10px;
}
.row .side img{
margin: 20px;
padding-top: 50px;
}
.row .main img{
padding-top: 100px;
}
.row .side button{
width: 80px;
height: 30px;
border: none;
border-radius: 5px;
background-color: rgb(219, 233, 23);
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="row">
<div class="side">
<img src="side.png" alt="order">
<p>In restaurants, pizza can be baked in an oven with stone bricks above the heat source, an electric deck oven, a conveyor belt oven or a wood- or coal-fired brick oven.</p>
<button>Order</button>
</div>
<div class="main">
<img src="pizza.png" alt="pizza">
<h1>Pizza</h1>
<p>Various types of ovens are used to cook them and many varieties exist.</p>
</div>
</body>
</html>
<!--
绝对定位法：
1、为side和main添加样式
2、利用position设置side为absolute，使其跳出文档流，完成side对main的覆盖
3、去除main和side的交叠。在side和main的父类row中设置padding-left：300px，
使整个模块空出左侧部分，此时side和main都右移了300px
4、设置side的绝对定位设置在最左侧，填充左侧黑色部分
不要忘记为每个模块标记 box-sizing: border-box;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
margin: 0%;
padding: 0%;
font-family: "Comic Sans MS", cursive;
}
body{
background: white;
margin: 50px;
font-family: sans-serif;
}
.row{
width: 100%;
background: #EEE;
color: #FFF;
box-sizing: border-box;
}
.row .side-col{
width: 300px;
height: 500px;
background: #C0392B;
padding: 50px;
box-sizing: border-box;
text-align: center;
float: left;
}
.row .side-col img{
margin-bottom: 25px;
}
.row .side-col button{
background:#F39C12;
border:none;
border-radius:4px;
font-size: 18px;
padding: 5px 4px;
margin-top: 25px;
}
.row .main-col{
text-align: center;
width: 100%;
height: 500px;
background: rgb(236, 114, 100);
box-sizing: border-box;
/*定义side和main都漂浮起来*/
float: right;
/*此时 side 覆盖 main，此处不能用 padding-left
因为side和main都为浮动元素，所以不可以使用内边距进行腾挪
空出300px之后，side便能覆盖main
文档流中，后者能进入前者设置的空位中
*/
margin-left: -300px;
}
/* 出现覆盖情况之后，我们定义的额外文档流便能发挥作用
我们为content结构添加左侧的外边距，将内容向右推移300px
*/
.row .main-col .content{
padding-left: 300px;
}
.row .main-col img{
margin-top: 80px;
}
.row .main-col p{
font-size: 26px;
}
.row .main-col h1{
font-size: 82px;
}
</style>
</head>
<body>
<div class="row">
<div class="main-col">
<div class="content">
<img src="pizza.png" alt="pizza">
<h1>Pizza</h1>
<p>Various types of ovens are used to cook them and many varieties exist.</p>
</div>
</div>
<div class="side-col">
<img src="side.png" alt="order">
<p>In restaurants, pizza can be baked in an oven with stone bricks above the heat source, an electric deck oven, a conveyor belt oven or a wood- or coal-fired brick oven.</p>
<button>Order</button>
</div>
</div>
</body>
</html>
<!--
浮动定位法：
布局：先main后side，并在main中多加一个dom结构content，因为main和side都要设置为浮动元素
main向右浮动，side向左浮动，此时为main添加外边距（margin）即可完成main和side的覆盖
（不可用内边距padding），因为side和main都是浮动元素
此时，为新添加的content结构添加margin-left属性(使用padding-left也可)，将main推离左侧即可
不要忘记给各模块添加box-side：boder-box属性
-->