关于流动版面的问题_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:28:47

Original

1170 people have browsed it

<style>body{	width:90%;	margin:0 auto}		#content{		overflow:auto;		height:100%;}    #nav,#feature,#footer{		background-color:#efefef;				margin:1%;}		.col1,.col2,.col3{			background-color:#efefef;			width:31.3%px;			float:left;			margin:1%;}			li{				display:inline;				padding:0.5em;}				#nav,#footer{					background-color:#efefef;					padding:0.5em 0;}					#feature,.article{						height:10em;						margin-bottom:1em;						background-color:#efefef;}</style>

Copy after login

<body><div id="header"><h1>Logo</h1><div id="nav"><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li></ul></div></div><div id="content"><div id="feature"><p>Feature</p></div><div class="article col1"><p>col one</p></div><div class="article col2"><p>col two</p></div><div class="article col3"><p>col three</p></div></div><div id="footer"><p>Copynight 2011</p></div></body>

Copy after login

为什么小弟做出的版面这样...

而不是这样子呢？宽度应该没设定错呀...

回复讨论(解决方案)

.col1,.col2,.col3{            background-color:#efefef;            width:31.3%px;            float:left;            margin:1%;}

Copy after login

这里的宽度单位？想用百分比还是想用像素？

文字居中显示的话，可以再body中添加一个text-align:center;

也可以在每一个div元素中添加，这个属性会被所有的后代元素继承的。

?於 div class "article col1"和div class "col1" 差?在哪?... 因?小弟是??自?有些不懂得地方
?什?要?上要用div class "article col1" 意?差在哪?

<div class="article col1"><p>col one</p></div><div class="article col2"><p>col two</p></div><div class="article col3"><p>col three</p></div>

Copy after login

?於 div class "article col1"和div class "col1" 差?在哪?... 因?小弟是??自?有些不懂得地方
?什?要?上要用div class "article col1" 意?差在哪?

<div class="article col1"><p>col one</p></div><div class="article col2"><p>col two</p></div><div class="article col3"><p>col three</p></div>

Copy after login

有没有高手能回答
网上查都查不到类似的
都只看见的

这种用法
class“ ”里面不是类别的名字吗......那“”里面的文章功用何在？

小弟懂了 ??!!

Related labels：

版面流动

source：php.cn

Previous article：如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose Next article：关于CSS text-aliagn的问题_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn