两个fixed margin布局样例

最新推荐文章于 2024-03-29 19:14:24 发布

转载最新推荐文章于 2024-03-29 19:14:24 发布 · 2.6k 阅读

文章标签：

#div #class #float #html #function #xml

编程专栏收录该内容

19 篇文章

订阅专栏

本文提供了两种使用CSS实现的固定布局示例：两栏布局和三栏布局。通过精确设置宽度和边距，确保了各栏目的正确显示。适用于网页设计中需要固定宽度布局的情况。

两个fixed margin布局样例
Two Columns & Fixed layouts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Dynamic Drive: CSS Fixed Layout #2.1- (Fixed-Fixed)</title>

body{...}{

margin:0;

padding:0;

line-height: 1.5em;

}

b{...}{font-size: 110%;}

em{...}{color: red;}

#maincontainer{...}{

width: 840px; /**//*Width of main container*/

margin: 0 auto; /**//*Center container on page 这一句如果想起作用，页首必须加xhtml DTD引用*/

}

#topsection{...}{

background: #EAEAEA;

height: 90px; /**//*Height of top section*/

}

#topsection h1{...}{

margin: 0;

padding-top: 15px;

}

#contentwrapper{...}{

float: left;

width: 100%;

}

#contentcolumn{...}{

margin-left: 200px; /**//*Set left margin to LeftColumnWidth*/

}

#leftcolumn{...}{

float: left;

width: 200px; /**//*Width of left column*/

margin-left: -840px; /**//*Set left margin to -(MainContainerWidth)*/

background: #C8FC98;

}

#footer{...}{

clear: left;

width: 100%;

background: black;

color: #FFF;

text-align: center;

padding: 4px 0;

}

#footer a{...}{

color: #FFFF80;

}

.innertube{...}{

margin: 10px; /**//*Margins for inner DIV inside each column (to provide padding)*/

margin-top: 0;

}

</style>

/**//*** Temporary text filler function. Remove when deploying template. ***/

var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]

function filltext(words)...{

for (var i=0; i<words; i++)

document.write(gibberish[Math.floor(Math.random()*3)]+" ")

}

</script>

</head>

<body>

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.1- (Fixed-Fixed)</h1></div></div>

<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">...filltext(45)</script></div>

</div>

<div class="innertube"><b>Left Column: <em>200px</em></b> <script type="text/javascript">...filltext(15)</script></div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>

</body>

</html>

Three Columns & Fixed layouts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>

body{

margin:0;

padding:0;

line-height: 1.5em;

}

b{font-size: 110%;}

em{color: red;}

#maincontainer{

width: 840px; /*Width of main container*/

margin: 0 auto; /*Center container on page*/

}

#topsection{

background: #EAEAEA;

height: 90px; /*Height of top section*/

}

#topsection h1{

margin: 0;

padding-top: 15px;

}

#contentwrapper{

float: left;

width: 100%;

}

#contentcolumn{

margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

}

#leftcolumn{

float: left;

width: 180px; /*Width of left column in pixel*/

margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/

background: #C8FC98;

}

#rightcolumn{

float: left;

width: 190px; /*Width of right column*/

margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/

background: #FDE95E;

}

#footer{

clear: left;

width: 100%;

background: black;

color: #FFF;

text-align: center;

padding: 4px 0;

}

#footer a{

color: #FFFF80;

}

.innertube{

margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/

margin-top: 0;

}

</style>

/*** Temporary text filler function. Remove when deploying template. ***/

var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]

function filltext(words){

for (var i=0; i<words; i++)

document.write(gibberish[Math.floor(Math.random()*3)]+" ")

}

</script>

</head>

<body>

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>

</div>

<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>

</body>

</html>

ps:其实很多大网站还是cnter元素+table的布局方式研究div还是要看一些新兴2.0网站