小白问题 :CSS 里如何让一列数据分两列显示

html-css018

小白问题 :CSS 里如何让一列数据分两列显示,第1张

.fptkn_list ul li{

float:left

width:97%

这个97%改成 45%试试呢,可能是因为友情链接的字比较成 变成两列放不下,所以就挤到下面去了

自动到右边去?

从理论上来说没有这样布局的。

因为DIV来布局的缺点就是 兼容性差 没有table 稳定,所以我们布局一般来说要把DIV的布局 结构更细更固定 防止 兼容性问题的出现。

<!--左边-->

<div id="sidebar" class="FloatLeft">

<!--左边新闻-->

<div id="sidebar_news">

<div id="sidebar_news_top">

<h1>新闻中心 News</h1>

</div>

<div id="sidebar_news_content">

<ul class="newslist">

<li><a href="#">脱离大陆市场实际 HTC换帅难解困局</a></li>

<li><a href="#">脱离大陆市场实际 HTC换帅难解困局</a></li>

<li><a href="#">脱离大陆市场实际 HTC换帅难解困局</a></li>

<li><a href="#">脱离大陆市场实际 HTC换帅难解困局</a></li>

<li><a href="#">脱离大陆市场实际 HTC换帅难解困局</a></li>

</ul>

</div>

</div>

<!--左边新闻-->

<!--快速通道-->

<div id="FastTrack"></div>

<!--快速通道-->

<!--相关链接-->

<div id="aboutlink"></div>

<!--相关链接-->

</div>

<!--右边-->

<div id="content_right" class="FloatLeft">

<!--焦点图-->

<div id="focus">

<img src="images/focusimg.jpg" />

</div>

<!--焦点图-->

<!--学院简介-->

<div id="Introduction" class="BasicCon">

<div id="Introduction_title">

<h1>某某学院<span><a href="#">MORE</a></span></h1>

</div>

<div id="Introduction_content">

<div id="Introduction_img" class="FloatLeft">

<img src="images/xyimg.jpg" />

</div>

<div id="Introduction_font" class="FloatLeft">

<p>大学产生之初,学院原是大学为了接待或者帮助来自其他国家和地区的贫困学生而提供的住宿场所。最早产生于1180年的巴黎大学,称为18人学院。顾名思义,该学院是为当时18名来自法国以外的贫困学生免费提供食宿的场所。后来,由于来自国外的学生不断增加,巴黎大学的学院数也随之扩大。13世纪以后,随着大学间国际交流的频繁,不仅在巴黎大学,欧洲其他一些著名的大学也相继建立了学院,而且随着大学规模的扩大,同一所大学中...</p>

</div>

</div>

</div>

<!--学院简介-->

<!--新闻-->

<div id="news" class="BasicCon">

<div id="news_title">

<h1>学院新闻<span><a href="#">MORE</a></span></h1>

</div>

</div>

<!--新闻-->

</div>

<!--右边-->

看,我这样的布局 是不是特别麻烦,写了特别多,但是我结构很清晰,很稳定 绝对不会出现IE7以及以上的兼容问题。而且便于修改