DIV CSS 佈局教程網

設為首頁加入收藏

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS+DIV設計實例：實現讓多個DIV排列時居中

CSS+DIV設計實例：實現讓多個DIV排列時居中

編輯：CSS詳解

- -

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html XMLns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/CSS">

body {text-align:center}

#outer {

width:60%;

background:#ffffcc;

margin:auto;

text-align:center;

}

.inner {

width:100px;

height:100px;

margin:5px;

border:1px solid #000;

}

* html .inner {display:inline}/* for IE*/

html>body #outer {display:table}/*for mozilla */

html>body .inner {display:table;float:left}/*for mozilla */

@media all and (min-width: 0px){/* Opera 7 styles */

html>body .inner {display:inline-block;float:none;}

}

</style>

</head>

<body>

<div id="outer">

<div class="inner">test</div>

<div class="inner">2</div>

<div class="inner">3</div>

<div class="inner">4</div>

<div class="inner">5</div>

<div class="inner">6</div>

<div class="inner">7</div>

<div class="inner">8</div>

<div class="inner">9</div>

<div class="inner">10</div>

<div class="inner">11</div>

<div class="inner">12</div>

<div class="inner">13</div>

<br style="clear:both" />

</div>

</body>

</Html>

<script language="Javascript">

var now = new Date();

document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");

</script>

<noscript>

<img src="http://counter.yesky.com/counter.sHtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>

</noscript>

上一頁:CSS實現導航條圖片的翻轉菜單
下一頁:CSS讓表格的溢出內容隱藏起來

CSS Sprite圖片處理技巧: 　在以前我們的工作中，以傳統切圖思想進行操作，講究精細，圖片規格越小越好，重量越小越好，其實規格大
CSS教程(3)：通過實例學習CSS背景: 1、如何重復背景圖像本例演示如何重復背景圖像。<Html><head>&l
CSS樣式表的hack的寫作方法: 我以往的習慣.demo{ float: left;

相關文章

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS基於單張背景圖實現自適應寬度的圓角菜單效果代碼如何用CSS來控制網頁字體的顯示樣式 CSS計數器(序列數字字符自動遞增)詳解純CSS實現的圓角化圖片基於JavaScript和CSS的Web圖表框架橫向對比讓樣式表CSS代碼更加專業規范 CSS開發框架技術OOCSS編寫和管理CSS的方法 CSS網頁布局:網頁頁面結構化點評DIV+CSS布局網站的優缺點(2) N個input，如何手動移動他的排序

熱門推薦

CSS中盒子模型和position DIV標簽實現布局的方式 CSS網頁布局排查錯誤的秘笈 CSS border-bottom定義不同顏色的下劃線一個不錯的CSS模擬的按鈕效果 css網站布局實錄學習筆記第三部分網頁布局與定位關於浏覽器文字選中顏色完全掌握純CSS布局網頁淘寶的面試題目: DIV層內容垂直居中的多種解決方法

大家都在看

chorme最小顯示字體大小為12px的bug 基於BootStrap Metronic開發框架經驗小結【一】框架總覽及菜單模塊的處理 JavaScript基本的輸出和嵌入式寫法教程 httpclient模擬登陸具體實現網頁分辨率設置技巧 JavaScript中的稀疏數組與密集數組[譯] Javascript核心讀書有感之語言核心 div細線表格

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|

Copyright © DIV+CSS佈局教程網 All Rights Reserved