                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

如果在left middle right 外加一个main并且固定main的宽度，如何实现上述案例

godxiaoxiong

2016-03-17

源自：如何用CSS进行网页布局 4-1

关注问题我要回答

566

操作

收起

4 回答

Geminihope
2016-03-25

如果你想设置main的具体宽度，则大于等于left和right的宽度。大于left和right可以显示middle，如果是等于则left和right所在的那一行就无法显示middle。如果middle的高度大于left和right，则下方可以显示

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

收起回答

Geminihope
2016-03-25

main的宽度自己设置，如果不想设置固定值，也可以用100%，全屏；可以居中也可以不居中，关键是要相对定位

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

收起回答

十年4
2016-03-17

<!DOCTYPE html>

<html>

<head>

<title>混合布局编程挑战</title>

body{margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px;background:gray;}

.main{height:600px;width:100%;background:red;position:relative;}

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

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

.right{width:200px;height:600px;background:blue;position:absolute;right:0px;top:0px;}

.foot{height:50px;background:orange;clear:both;}

</style>

</head>

<body>

<div class="right">right</div><div class="middle">middle</div><div class="left">left</div>

</div>

</body>

</html>

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

收起回答

godxiaoxiong 提问者

好像不对呀，我是想知道main固定宽度

2016-03-18 回复有任何疑惑可以回复我~

十年4 回复 godxiaoxiong 提问者

你说的main是left right middle的父元素吗？

2016-03-21 回复有任何疑惑可以回复我~

godxiaoxiong 提问者回复十年4

嗯是的

2016-03-24 回复有任何疑惑可以回复我~

qq_须臾_2
2016-03-17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0;}
.main{height:600px; background:#9CF;margin:0 300px 0 200px;}
.right{ height:600px; width:300px; position:absolute; top:0;right:0;background:#FCC;}
.main2{width:800px;margin:0 auto;position:relative}
</style>
</head>

<body>
    <div class="main2">
    <div class="left">left</div>
    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
    <div class="right">right</div>
    <div class="main2">
</body>
</html>