<!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;
min-width:
950px;
}
#left{
width:
350px;
height:
500px;
background:
#16A085;
/*可以吃掉上层的margin,left向上向左移动*/
margin-left:
-100%;
}
#main{
width:
100%;
height:
500px;
background:
#1ABC9C;
}
#right{
width:
250px;
height:
500px;
background:
#14856d;
margin-left:
-250px;
}
.col{
float:
left;
}
#content{
margin:
0px
250px
0
350px;
box-sizing:
border-box;
}
.col{
color:
white;
font-family:
Georgia,
'Times New Roman',
Times,
serif;
font-size:
20px;
padding:
30px
50px;
/* 设置行高 */
line-height:
1.5;
box-sizing:
border-box;
}
.col img{
float:
left;
margin:
20px;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"container"
>
<
div
id=
"main"
class=
"col"
>
<
div
id=
"content"
>
<
img
src=
"star.png"
>
<
p
>Ramalinga as usual was walking into the Bhuvana Vijayam premises and the guards stopped him. He questioned why were they blocking the way. The soldiers told Ramalinga about the line and asked him to enter the premises only after reciting the first three lines for the last line they recited to him. Ramalinga boiled and trembled with anger on those soldiers.
</
p
>
</
div
>
</
div
>
<
div
id=
"left"
class=
"col"
>
<
img
src=
"drink.png"
>
<
p
>Long before guards could understand the meaning of the poem, Ramalinga walked stiff into the main court hall. This state of affairs brought Ramalinga more close to Rayalu.
</
p
>
</
div
>
<
div
id=
"right"
class=
"col"
>
<
img
src=
"closed.png"
>
<
p
>Rayalu clapped in all praise of Ramalinga for his ingenuity and wit filled narration.
</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
<!--
left main(content) right
1、left main right全部float left
2、left： margin-left：-100%；
right：margin-left：-250px;
不设置外层container的padding，设置main的子div content的margin属性
完成
-->
