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 日志相册贡献荣誉积分 62688 狗仔卡	发表于 2017-2-16 11:38:33 \| 显示全部楼层 \|阅读模式购买主题已有 10 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 38
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

点评

评分

点评

评分

点评

评分

浏览过的版块