0 0 5 0 - 三列自适应布局 - 【终极版三叉戟】

不二如是 · 发表于 2017-2-16 11:38:33

购买主题 已有 10 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-5-3 16:04:17

琢磨了许久

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>三列中列自适应布局</title>
        <style type="text/css">
                .col{
                        float: left;
                        height: 600px;
                        color: #FF44AA;
                        font-family: sans-serif;
                        text-align: center;
                }
                .col h1{
                        margin-top: 50px;
                }
                .col p{
                        font-size: 20px;
                        margin-top: 50px;
                }
                .col img{
                        
                }
                #page{
                        padding-left: 400px;
                        padding-right: 400px;
                }
                #main{
                        background: #6F6;
                        width: 100%;
                }
                #left{
                        background: #9F9;
                        width: 400px;
                        margin-left: -100%;
                        position: relative;
                        right:400px;
                }
                #right{
                        background: #3F3;
                        width: 400px;
                        margin-right: -400px;
                }
        </style>
</head>
<body>
<div id="page">
        
        <div id="main" class="col">
                <h1>白居易《牡丹》</h1>
                <img src="p01.jpg">
                <p>绝代只西子，众芳惟牡丹。</p>
        </div>
        <div id="left" class="col">
                <h1>王安石《梅》</h1>
                <img src="p02.jpg">
                <p>墙角数枝梅，凌寒独自开。</p>
        </div>
        <div id="right" class="col">
                <h1>张学良《咏兰诗》</h1>
                <img src="p03.jpg">
                <p>花中真君子，风姿寄高雅</p>
        </div>
</div>
</body>
</html>

aswyamato1989 · 发表于 2017-7-27 03:40:58

交作业！

疯样的篮子 · 发表于 2017-3-30 21:05:24

求助，用webstorm里边打开浏览器显示404错误

白白白zzz · 发表于 2017-7-30 14:23:30

看看

aswyamato1989 · 发表于 2017-8-20 10:08:39

正在做professor给的第一个project，突然想到一个问题，这种三列自适应布局，是不是也可以使用上一讲所用的方法，将left和right设置为position：absolute来实现啊？

隨鈊乄鎍慾 · 发表于 2018-6-23 09:59:50

交作业，希望不要太尴尬

：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

       #page{
            padding-left:400px;
            padding-right:400px;
        }
       #page p{
           font-size:20px;
           margin-top:35px;
       }
        .col{
            float:left;
            height:600px;
            text-align: center;
            padding-top: 50px;
            color:#ff44aa;
            font-family:"STFangsong";
        }

        #left{
            background: #9f9;
            width:400px;
            margin-left:-100%;
            position: relative;
            right:400px;

        }
        #main{
            background:#6f6;
            width:100%;

        }
        #right{
            background:#3f3;
            width:400px;
            margin-right:-400px;
        }
    </style>
</head>
<body>
<div id="page">
    <div id="main" class="col">
        <h1>白居易《牡丹》</h1>
        <img src="1.png">
        <p>绝代只西子，众芳惟牡丹。</p>
    </div>
    <div id="left" class="col">
        <h1>王安石《梅》</h1>
        <img src="2.png">
        <p>墙角数枝梅，凌寒独自开。</p>
    </div>
    <div id="right" class="col">
        <h1>张学良《咏兰诗》</h1>
        <img src="3.png">
        <p>花中真君子，风姿寄高雅</p>
    </div>
</div>
</body>
</html>

yanmeilemon · 发表于 2018-7-9 16:27:34

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
   #page{
         padding-left: 400px;
         padding-right: 400px;
      }
#left{
         background: #9F9;
         width: 400px;
margin-left: -100%;
position: relative;
         right:400px;
      }
      #main{
         background: #6F6;
         width: 100%;
      }
      #right{
         background: #3F3;
         width: 400px;
margin-right: -400px;
      }
      .col{
         float: left;
         height: 666px;
text-align: center;
color: #FF44AA;
         font-family: "STFangsong";
      }
.col h1{
         margin-top: 50px;
      }
.col p{
         font-size: 20px;
         margin-top: 50px;
      }

</style>
</head>
<body>
<div id="page">
      <div id="main" class="col">
         <h1>白居易《牡丹》</h1>
         <img src="1.png" width=250 height=250>
         <p>绝代只西子，众芳惟牡丹。</p>
      </div>
      <div id="left" class="col">
         <h1>王安石《梅》</h1>
         <img src="2.png" width=250 height=250>
         <p>墙角数枝梅，凌寒独自开。</p>
      </div>
      <div id="right" class="col">
         <h1>张学良《咏兰诗》</h1>
         <img src="3.png" width=250 height=250>
         <p>花中真君子，风姿寄高雅</p>
      </div>
</div>
</body>
</html>

小苏鱿鱼2 · 发表于 2018-10-26 15:29:24

然后由于left、right设置了宽度300px，所以在文档流中就被挤到下一行了。
上句话是误导学生吧，main宽度是100%当然铺满上面一行了，跟下面宽度有什么关系。

小苏鱿鱼2 · 发表于 2018-10-26 15:39:21

#right{margin-left:-300px;
}

星空·无限 · 发表于 2019-1-9 21:42:39

说下个人的理解吧，开始我也没有搞懂什么意思。主要是大神说的的这里该怎么设置有点不懂比如说左右两边设置-100%这个属性，后面看到效果。想到了是不是和绝对定位这个属性有关？就决定写css代码进行试试实现了同样的效果。其实原理就是绝对定位会脱离标准流，不占用标准流的空间位置。因为左右两边的宽度都是固定的，利用外边距margin空出左右两边的固定区域的宽度用于放置left和right。简单来说就是让中间自适应区域为标准流，左右两边为浮动在标准流之上。

不知道这样理解对不对。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>050三列自适应布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
        }
        .top{
            width: 100%;
            height: 50px;
            background: #cccccc;
        }
        .footer{
            width: 100%;
            height: 50px;
            background: #abdc44;
        }
        /*左右固定，中间自适应*/
        .container{
            width: 100%;
            height: 100%;
            background: #805b77;
            position: relative;
        }
        .left{
            background: cyan;
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 10px;
        }
        .center{
            margin: 0 400px;
            background: red;
            width: auto;
            height: 600px;
        }
        .right{
            background: tomato;
            width: 400px;
            height: 500px;
            position: absolute;
            right: 0;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="top">顶部</div>
    <div class="container">
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </div>
<div class="footer">底部</div>
</body>
</html>

睁眼睡大觉 · 发表于 2019-3-27 20:55:35

好骚的操作啊。

你在意在便在 · 发表于 2019-11-2 15:09:10

细细琢磨~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
}
#page {
        padding-left:450px;
        padding-right:450px;
}
#main {
        width:100%;
        background: #f8a5c2;
        
}
#left {
        width:450px;
        background: #f78fb3;
        margin-left: -100%;
        position:relative;
        right:450px;
}
#right {
        width:450px;
        background:#e66767;
        margin-right: -450px;
}
.col {
        float:left;
        height:666px;
        text-align: center;
        color:white;
        font-family:"SamSun";
        font-size: 25px;
        padding-top:99px;
}
#page img {
        margin-top: 50px;
}
#page p {
        margin-top: 50px;
}
</style>
</head>
<body>
<div id="page">
        <div id="main" class="col">
                <h1>白居易《牡丹》</h1>
                <img src="hua.png">
                <p>绝代只西子，众芳惟牡丹。</p>
        </div>
        <div id="left" class="col">
                <h1>王安石《梅》</h1>
                <img src="mei.png">
                <p>墙角数枝梅，凌寒独自开。</p>
        </div>
        <div id="right" class="col">
                <h1>张学良《咏兰诗》</h1>
                <img src="lan.png">
                <p>花中真君子，风姿寄高雅</p>
        </div>
</div>
</body>
</html>

suweixuan1998 · 发表于 2020-1-9 23:57:12

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>无题</title>
        <style type="text/css">

        #left{
            background: #9F9;
            width: 300px;
            margin-left: -100%;
            position: relative;
            right: 300px;
        }
        #page{
            padding-left: 300px;
            padding-right: 300px;
        }
        #main{
             background: #6F6;
             width: 100%;
         }
        #right{
            background: #3F3;
            width: 300px;
            margin-right: -300px;

        }
        #page img {
            margin-left: 50px;
        }
        .col{
            float: left;
            height: 666px;
            padding-top: 50px;
            color: #FF44AA;
            font-family: "STFangsong";
            text-align: center;
        }
        #page p{
            font-size: 20px;
            margin-top: 350px;
        }
        .col img{
            float: left;
        }
        img{
            width:200px;

        }
            #main img{
                margin-left: 150px;
            }
        </style>
</head>
<body>
        <div id="page">
        <div id="main" class="col">
            <h1>白居易《牡丹》</h1>
            <img src="2.png">
            <p>
                绝代只西子，众芳惟牡丹。
            </p>
        </div>

            <div id="left" class="col">
                <h1>王安石《梅》</h1>
                <img src="3.png">
                <p>墙角数枝梅，凌寒独自开。</p>
            </div>
            <div id="right" class="col">
                <h1>张学良《咏兰诗》</h1>
                <img src="4.png">
                <p>花中真君子，风姿寄高雅</p>
            </div>
        </div>
</body>
</html>

小脑斧 · 发表于 2020-3-16 20:05:58

加了个阴影左面也有了，阴影能跟着图片自动变吗

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57321 狗仔卡	发表于 2017-2-16 11:38:33 \| 显示全部楼层 \|阅读模式购买主题已有 10 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 5 0 - 三列自适应布局 - 【终极版三叉戟】

本帖被以下淘专辑推荐:

点评

点评

评分

点评

评分

点评

评分