Home  >  Article  >  Web Front-end  >  关于流动版面的问题_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:28:471141browse

<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>


<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>


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

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


回复讨论(解决方案)

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


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


文字居中显示的话,可以再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>

?於 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>



有没有高手能回答 
网上查都查不到类似的 
都只看见的
这种用法 
class“ ”里面不是类别的名字吗......那“”里面的文章功用何在?

小弟懂了  ??!!

Statement:
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