0 0 5 0 - 三列自适应布局 - 【终极版三叉戟】,Web密训营,Web开发,鱼C论坛

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

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

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

琢磨了许久{:10_266:}
<!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

交作业，希望不要太尴尬{:10_254:}：
<!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

好骚的操作啊。{:10_281:}

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

细细琢磨~ {:10_243:}
<!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

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

页: [1]

鱼C论坛's Archiver