ife-2016春-part1-task3

最新推荐文章于 2019-07-17 13:51:35 发布

strive_wsy

最新推荐文章于 2019-07-17 13:51:35 发布

阅读量361

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/strive_wsy/article/details/80090369

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

task3实现三栏式布局

任务描述

使用 HTML 与 CSS 按照示例图（点击查看）实现三栏式布局。
左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

我的代码

<!doctype html>
<html>
<head>
	<title>task3实现三栏式布局</title>
	<meta charset="utf-8">
    <style type="text/css">
	.div-b{position: relative;
          border:1px solid #999;
          background-color: #eee;
          padding:20px;}
    .div-1{position: absolute;
    	   top:25px;
    	   left:25px;
          border:1px solid #999;
          width:200px;
          background-color:white;}
    .div-1 img{display:inline-block;
               padding:10px;}
    .div-1 span{float:right;
                padding:10px;}
    .div-2{position: absolute;
    	   top:25px;
    	   left:250px;
    	   padding:10px;
    	   border: 1px solid #999;
           background-color:white;}
    .div-3{position:absolute;
           top:25px;
           right:25px;
           border: 1px solid #999;}
    .div-3 img{display: block;
               margin:10px;}
    </style>
</head>
<body>
    <div class="div-b">
	<div class="div-1"><img src="image/logo.jpg"><span>动漫：<br/>东京食尸鬼</span></div>	
    <div class="div-2">
    <span>东京食尸鬼的介绍</span>
	<p>金木研动漫主角，开始十分单纯并非常容易信任他人，被喰种神代利世盯上，差点成为其盘中餐，后由于利世被高空坠物砸到受到重伤侥幸脱险，但因身受重伤，在救护车上因为情况紧急被移植了利世的器官(包括利世的赫包)，身体出现了喰种的反应，成为独眼喰种。由于变为喰种无法进食正常人的食物而苦恼了很长一段时间，后被喰种咖啡厅“安定区”收留，开始逐渐了解并且融入喰种的世界。</p>
	<p>在青铜树和CCG看来，金木只是一个试验品，至于什么实验的目的是什么，CCG当作是人类改造计划的一部分，青铜树则是量产独眼。金木的实验由嘉纳完成，而嘉纳后来从CCG跳槽到青铜树，而且金木的回忆里当天夜晚钢轧下坠又有道化师的介入，更显得其中的关系扑朔迷离。而试验品——金木最终由CCG回收。</p>
	<p>佐佐木的成长空间很广，随着成长，库因克高级了，能使用半赫甚至全赫的力量了。想到以后穿着新爸，后面还有蜈蚣尾，拿着能匹敌IXA的库因克，能战胜有马和小枭都不是问题（说到这里，肯定又有人说有马是独眼，目前没有证据证明或者反驳，我就不展开讲了）

     亚门是前作的一个主角，前作最后一集失踪了（很明显是被拐走的嘛）如今青铜树虽然失去了利世，但是得到了店长，看着店长被关在培养基里，十有八九就是拿来代替利世的了。</p></div>
     <div class="div-3">
     <img src="image/person.jpg"> <img src="image/person.jpg"> <img src="image/person.jpg">
     <img src="image/person.jpg"></div>
 </div>
</body>

</html>

实现效果

问题待解决：

div-b实现子元素最高

div-2实现自适应宽度

______________________以上为2018.4.26编辑内容_______________________________________________________________

_____________________以下为2018.4.27编辑内容________________________________________________________________

话说零基础想实现个样式真的是难啊，尤其是遇到问题的时候，哇，各种搜知乎、博客、然后自己原有的一丢丢想法被打的毛都不剩（甚至最后发现原来的那一丢丢想法都是错误的，在搜了n篇资源，遇见n个前辈对相关问题的回答的时候，暮然发现出发点都是错的，悲哀，心疼自己一秒钟）实在是昨天为了这个三栏式布局，搞得脑仁子疼，吃不下睡不着，一想起来就心塞塞，资源一大堆还各种各样的，看的我晕啊~废话不多说，主要太苦逼！

昨天思考了快一天的那两个没实现的问题，然后在各种。。。。之后今天解决了用的float，虽然也是借鉴别人的（无奈）

1、昨天其实也实现了中间一栏自适应宽度，主要是通过设置margin，左右两栏设置的absolute，然后就发现，哇塞右边的超出来了哇，撑出父元素了呀（好像是折磨叫的），呃，搜资源，搜资源，有不会的就问各种网络，反正我是没大神带的小白，走到哪是哪，然后就搜到各种标题为：“实现三栏式布局，中间宽度自适应的方法实现”（心里那个激动啊，我不贴链接了）结果太多了，我就想看看有没有我这种的，好像有个左右position：absolute，中间设置margin-left，margin-right的，也说了一些这种方法的好处和缺点，但没瞧见说这种方法存在子元素撑出父元素/父元素在左右absolute，右栏还是最高子元素情况时，如何高度自适应。额，于是粗略看到有5种方法：绝对定位法，自身浮动法，圣杯布局（没具体看，忙着搜），双飞翼，还有一个是flex布局（还有什么网格布局，table布局，我也不知道怎么分的，之后我再慢慢看）然后我就陷入死循环了：父元素在左右absolute，右栏还是最高子元素情况时，如何高度自适应。其中还走过一条歪路：有个人说，最长元素不设置position，其余2个子元素position即可实现三栏式布局高度自适应，可惜我的最长子元素就是需要absolute。哎，最后终知道，absolute是脱离文档流，父元素不会被影响，不会自适应它的高度。什么是脱离文档流？我也搜了，为了可以更好的理解。脱离文档流：表面简单的理解就是，脱离了文档，其他元素的布局不受影响。所以我这里的父元素才不会适应子元素absolute的高度，这就是个牛角尖，我TM钻了一天。（脱离文档流，也需要自己好好总结一下，对自己敲黑板）。

2、前面都是废话，最后用了float解决了这个三栏式布局，中间宽度自适应，父元素高度自适应子元素最高高度，解决的时候，有种修炼成仙的感觉（修仙玄幻小说看多了，我是个小说迷），可能很多大神或者有经验的人觉得，折磨简单的问题，你居然扣了折磨久，三栏式布局最基本的好不了。呃，我不知道说啥，毕竟我自学的这条路我能走多久，我也不知道，说不准，哪天我又钻牛角尖的时候，我一郁闷，我就放弃了。

代码（主要是css）：

<!doctype html>
<html>
<head>
	<title>task3实现三栏式布局</title>
	<meta charset="utf-8">
    <style type="text/css">
    *{padding:0;
      margin:0;}
    body{padding:20px;}
   .wrap ,.left ,.right ,.middle
           {border:1px solid #999;
   	        padding:20px;}
   .wrap{background-color:#eee;
   	     overflow: auto;
         }
  
   .left{float:left;
   	     width:160px;
   	     background-color: #fff;
        }
    .middle{background-color:#fff;
            margin:0 160px 0 240px;}
   
 .right{float: right;
          width:80px;
        background-color: #fff;}
    
    </style>
</head>
<body>
    <div class="wrap">
	<div class="left"><img src="image/logo.jpg"><span>动漫：<br/>东京食尸鬼</span></div>	
   
     <div class="right">
     <img src="image/person.jpg"> <img src="image/person.jpg"> <img src="image/person.jpg">
     <img src="image/person.jpg"></div>
      <div class="middle">
    <span>东京食尸鬼的介绍</span>
	<p>金木研动漫主角，开始十分单纯并非常容易信任他人，被喰种神代利世盯上，差点成为其盘中餐，后由于利世被高空坠物砸到受到重伤侥幸脱险，但因身受重伤，在救护车上因为情况紧急被移植了利世的器官(包括利世的赫包)，身体出现了喰种的反应，成为独眼喰种。由于变为喰种无法进食正常人的食物而苦恼了很长一段时间，后被喰种咖啡厅“安定区”收留，开始逐渐了解并且融入喰种的世界。</p>
	<p>在青铜树和CCG看来，金木只是一个试验品，至于什么实验的目的是什么，CCG当作是人类改造计划的一部分，青铜树则是量产独眼。金木的实验由嘉纳完成，而嘉纳后来从CCG跳槽到青铜树，而且金木的回忆里当天夜晚钢轧下坠又有道化师的介入，更显得其中的关系扑朔迷离。而试验品——金木最终由CCG回收。</p>
	<p>佐佐木的成长空间很广，随着成长，库因克高级了，能使用半赫甚至全赫的力量了。想到以后穿着新爸，后面还有蜈蚣尾，拿着能匹敌IXA的库因克，能战胜有马和小枭都不是问题（说到这里，肯定又有人说有马是独眼，目前没有证据证明或者反驳，我就不展开讲了）

     亚门是前作的一个主角，前作最后一集失踪了（很明显是被拐走的嘛）如今青铜树虽然失去了利世，但是得到了店长，看着店长被关在培养基里，十有八九就是拿来代替利世的了。</p></div>
 </div>

</body>

</html>

效果图：

3、优缺点（摘录别人的）

float法：该布局的好处是受外界的影响小，但是不足是三个元素的顺序，中间部分一定要放到最后，这是和绝对定位不一样的地方，middle占据文档流位置，所以一定要放到最后，左右两个元素位置没有关系。但浏览器窗口很小的时候，右边元素会挤到下一行。

我的操作：

1.html部分：middle部分没放到最后，果然right被挤到下面了

2.我将middle部分放到了最后面，right的后面，然后，right确实没被挤到最后一行，可是他超出了父元素wrap了

3.经过浏览器的搜索，知道了是需要在父元素wrap的样式中添加overflow：auto/overflow：hidden，就是清除浮动的方法（这只是随手搜的一个）（清除浮动的方法也要总结一下，对自己敲黑板）

算了，就先这样吧，反正也只是对自己的总结，我要再去敲一敲这个样式喽！

strive_wsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ife-2016春-part1-task3

task3实现三栏式布局任务描述使用 HTML 与 CSS 按照示例图（点击查看）实现三栏式布局。左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。我的代码&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;task3实现三栏式布局&l...
复制链接

扫一扫