【HTML&CSS】混合布局


<html>
<head>
    <meta charset="utf-8">
    <title>混合布局title>
    <style type="text/css">
    body{margin: 0; padding: 0;}
    .top{height: 100px;background: blue;}
    .main{width: 800px;height: 600px;background: #ccc;margin: 0 auto;}
    .left{width:200px;height: 600px;background: yellow;float: left;}
    .right{width: 600px;height: 600px;background:black;float: right;}
    .foot{width: 800px;height: 100px;background: #900;margin: 0 auto;}
     --margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思-->
    style>
head>
<body>
    <div class="top">div>
    <div class="main">
        <div class="right">div>
        <div class="left">div>
    div>  
    <div class="foot">div>
body>
html>

补充 : 如果想要 margin 0 auto ;居中的话

必须要设置高度才可以 第二个就考虑一下DOCTYPE

你可能感兴趣的:(总结,前端)