<!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%;
/*最后一步绝对定位，填充左侧空白*/
position:
absolute;
margin-left:
-350px;
}
#main{
width:
100%;
height:
500px;
background:
#1ABC9C;
}
#right{
width:
250px;
height:
500px;
background:
#14856d;
margin-right:
-250px;
}
.col{
float:
left;
}
#container{
box-sizing:
border-box;
padding-left:
350px;
padding-right:
250px;
position:
relative;
}
.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"
>
<
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
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
>
<!--
三部分：container(left main right)
1、 三部分设置浮动
2、left: margin-left: -100%;
right: margin-right：-250px;
container: padding-left: 350px; padding-right: 250px;
3、左侧空白部分绝对定位
right:350px;
-->
