CSS multi-line multi-column News mode _ Experience Exchange

CSS Multi-line multi-column News mode _ Experience Exchange

Look at the picture:

This effect, or even three columns of four columns of news module, I used to use table, thought than CSS convenience, until later issued a floating, the original with UL more aspects, more easy to control, first to see the code it:

Reference:

. news{}. News li{list-style:none; Clear:both}. News Li a#n1{Text-decoration:none; float:left; line-height:22px;}. News L I a#n2{text-decoration:none; float:right; color: #999}. News Li a#n3{float:right; padding-right:20px;color: #999}. News L I a#n1:hover{text-decoration:underline;}. News Li A#n3:hover,.news li a#n3:hover{text-decoration:none;}

A#N1 for news headlines, left float, N2 and N3 for clicks and release date, right float, distance 20px;
Note that all floats must be cleared on LI.
Test support Ie6,ie7,ff,opera.

Example, three columns:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 example, two columns: 
 
 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 Example, dashed line: 
 
 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 
 example, different background color: 
 
 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 
 Example, border: 
 
 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
The above is the CSS multi-row multi-Column News mode _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!


