为了账号安全,请及时绑定邮箱和手机立即绑定

关于定位问题

怎么左右固定宽度,中间自适应宽度,在一行显示

58213b410001d34505000171.jpg

58213b430001869105000246.jpg


正在回答

5 回答

main left middle  right 类都有改动的地方  看看能理解吗

0 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//585d36e7000153fd13610607.jpg

效果图是这样的

0 回复 有任何疑惑可以回复我~

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb-2312" />

<title>三列布局</title>

<style type="text/css">

* {margin:0;padding:0;}

.top {height:100px;background:#9F0;}

.head {width:800px;line-height:100px;margin:0 auto;text-align:center;font-size:40px;font-


weight:bold;}

.main {width:800px;height:600px;margin: 0 auto;background:yellow;position:relative;}

.left {width:200px;height:600px;background:#00F;position:absolute;left:0;top:0;}

.middle{height:600px;background:red;margin:0 110px 0 210px;}

.right{width:100px;height:600px;position:absolute;right:0;top:0;background:#F36;}

.foot{height:80px;background:#0F0;}

</style>

</head>


<body>

   <div class="top">

     <div class="head">head</div>

   </div> 

<div class="main">

    <div class="left"><h3>left</h3></div>

    <div class="middle"><h3>middle</h3>设计首页的第一步是设计版面布局。就象传统的报刊杂志编


辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始


趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通


的,你可以领会要点,举一反三。</div>

    <div class="right"><h3>right</h3></div>

</div>

<div class="foot">foot</div>

</body>

按照这个改就行了

0 回复 有任何疑惑可以回复我~

不要用float,left ,right用position:absolute试试。middle用margin左右定位就好。希望你学的愉快!

0 回复 有任何疑惑可以回复我~

左右两边使用绝对定位

左:position:absolute;top:0;left:0;

右:position:absolute;top:0;right:0;

0 回复 有任何疑惑可以回复我~
#1

慕粉13212751343 提问者

我试过这样会跑到浏览器左上角和右上角,我想他们在中间,main那个div里
2016-11-08 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

关于定位问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信