css div控制

最新推荐文章于 2024-08-20 16:48:16 发布

iteye_18611

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量105

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_18611/article/details/82611873

版权

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<div id="container" style="width:500px">

  <div id="header" style="margin:0 auto;width:200px;">
    <div id="left" 
      style="background-color:#FFA500;text-align:center;
            width:100px;float:left;">left</div>
    <div id="right" 
      style="background-color:#FFD700;text-align:center;
            width:100px;float:left;">right</div>
    <div id="capa" style="clear:both;"></div>
  </div>

  <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>Menu</b><br>
    HTML<br>
    CSS<br>
    JavaScript
  </div>

  <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    Content goes here
  </div>

  <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright © W3Schools.com
  </div>

</div>

</body>
</html>

ref http://www.w3cschool.cc/html/html-layouts.html

DIV块级元素，同级别DIV默认起下一行。

同级别DIV如果需要并排，设置float:left。最后还要记得在加一个同级div，设置clear:both，这样，后面的同级div就又是默认起下一行了。

div设置自己居中，设置magin:0 auto

div设置自己内部的文字居中，设置text-align:center

iteye_18611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css div控制

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="contai
复制链接

扫一扫