页面布局 --- 三列自适应布局

来源：互联网发布：greenvpn网络加速器编辑：程序博客网时间：2024/06/16 09:05

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example</title> <style type="text/css"> body { margin:50px; min-width:950px; } #left{ background:#16A085; width:350px; height:500px; } #main{ background:#1ABC9C; width:100%; } #right{ background:#14856D; width:250px; height:500px; } .col{ float:left; height:500px; } #left{ margin-left:-100%; position: relative; right:350px; } #right{ margin-right: -250px; } #container{ padding-left: 350px; padding-right: 250px; } .col{ color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:23px; line-height:1.5; padding:30px 50px; 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>

阅读全文

0 0