1
我設計一個網站,我需要它看起來像這樣http://www.spookycraft.net/CSS定位問題(基本)
不包括幻燈片放映和JavaScript這樣的,我只需要在一箇中間的4個獨立的可點擊塊網頁,我試圖使用margin:auto
,然後重新定位它使用margin-left
和margin-bottom
等,但是當我使用margin-bottom
它只是分開更多,行爲相當有趣這裏是我目前的代碼記住我也需要它看起來一樣一個更高分辨率的屏幕,這就是爲什麼我試圖使用margin:auto;
<!DOCTYPE HTML>
<html>
<head>
<table border="10px"; class="head">
<tr>
<td>
<img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
</td>
<tr>
</table>
<style media="screen" type="text/css">
.tone{
margin:auto;
}
.ttwo{
margin:auto;
}
.tthree{
margin:auto;
}
.tfour{
margin:auto;
}
.head{
margin:auto;
}
</style>
</head>
<body>
<table border="5px"; class="tone">
<tr>
<td>
<a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
</td>
</tr>
</table>
<table border="5px"; class="ttwo">
<tr>
<td>
<a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
</td>
</tr>
</table>
<table border="5px" class="tthree">
<tr>
<td>
<a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
</td>
</tr>
</table>
<table border="5px" class="tfour">
<tr>
<td>
<a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
</td>
</tr>
</table>
</body>
</html>
任何幫助,將不勝感激!我會努力尋找我的問題的答案,當我做的時候我會更新這個線程。
我打算髮表一個答案,但是我在下面看到的前兩個給你你需要聽到的東西。不要使用表格。然而,你的例子不起作用的原因是你的每個盒子都在一個單獨的'
回答
不要使用表格,它們在我的書中是不可以的。目前不應該將表格用於HTML頁面中的結構,它們只能用於以表格格式呈現數據。只需使用
<div>
,並在其周圍使用主包裝<div>
。像這樣的東西是完美的:HTML:
CSS:
演示在這裏:http://jsfiddle.net/aRSNh/172/
來源
2013-05-28 04:18:40 adaam
非常感謝您,我將來不會使用這樣的表格來處理此類問題。 – user2426889
好的,那麼請你把這個標記爲正確的。 – adaam
我不熟悉的表的設計,但如果你想用
div
建立它這個CSS
來源
2013-05-28 04:21:11
快速CSS開發一個很好的圖書館是Twitter的引導http://twitter.github.io/bootstrap/index.html
下面是一個簡單的例子使用引導:
Plunker:http://embed.plnkr.co/iKgsmZ/preview
來源
2013-05-28 04:40:44 JonnyD91
相關問題