1. 首頁
  2. 問答
  3. Html divs表像

Html divs表像

2013-03-13 76 views
1

我想知道如何創建兩個像HTML中的對象。我需要這兩個「桌子」位於右側，另一個位於頁面的左側。這樣他們就像平行表。每當我試圖用div來做這件事時，左手邊都完好無損，但右手邊看起來像是另一個的延續，我的意思是它的垂直對齊位於中間的某個位置，就在第一個「表「結束。Html divs表像

的html代碼：

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

<head> 

<link type="text/css" rel=stylesheet1 href="stylesheet1.css"/> 
<title>Maths lessons</title> 

</head> 

<body background="img.jpg"> 
<h1 id="h1"> 
<center><B>Maths lessons</B></center></h1> 
</h1> 
<hr/> 

<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 
<div class="div1">Geometry</div> 

<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 
<div class="div2">Geometry</div> 

</body> 

</html> 

.div1 
{ 
width:10%; 
border-radius:10px; 
height:2%; 
float:left; 

} 

.div2 
{ 
width:10%; 
border-radius:10px; 
height:2%; 
float:right; 

    #h1 
{ 
font-family:Times,serif; 
width:1000px; 
height:50px; 
text-align:center; 
margin:auto; 
}

來源

2013-03-13 user2167174

+2

郵編請 – jchapa 2013-03-13 20:13:12

+1

哪裏是你的碼？ – 2013-03-13 20:13:52

+0

大聲笑，桌子....好的，你沒有桌子。對於表我們使用

元素。在這裏尋找一個例子：http://www.w3schools.com/html/html_tables.asp。對不起，我誤讀了。 – 2013-03-13 21:43:27

回答

1

這裏的東西，可以幫助（點擊鏈接，並嘗試，改變並重新運行）：

http://jsbin.com/amiyur/1/edit

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

<link type="text/css" rel=stylesheet1 href="stylesheet1.css"/> 
<title>Maths lessons</title> 

</head> 

<body background="img.jpg"> 
<h1 id="h1"> 
<center><B>Maths lessons</B></center></h1> 
<hr/> 

<div class='my-table red'> 
<div class="div1">Geo</div> 
<div class="div1">Geo</div> 
<div class="div1">Geo</div> 
</div> 


<div class='my-table blue'> 
<div class="div2">Geo</div> 
<div class="div2">Geo</div> 
<div class="div2">Geo</div> 
</div> 

<div class='clear'></div> 
<div class='white' style='width:100px; height:50px;'></div> 
</body> 

</html> 




.div1 
{ 
width:50px; 
border-radius:10px; 
height:20px; 
float:left; 
display: table-cell; 
} 

.div2 
{ 
width:50px; 
border-radius:10px; 
height:20px; 
float:right; 
} 

#h1 
{ 
font-family:Times,serif; 
width:1000px; 
height:50px; 
text-align:center; 
margin:auto; 
} 

.my-table { 
    float:left; 
} 

.red {background-color: red;} 
.blue {background-color: blue;} 
.white {background-color: white;} 

.clear {clear:both;}

來源

2013-03-13 22:05:14

+0

實際上並沒有按照我預期的方式工作。它仍然像一頁左側的一張桌子。但無論如何感謝 – user2167174 2013-03-14 00:25:53

+0

紅色的「桌子」在左邊，紅色的右邊是藍色的。下面還添加了一個白色的div。 – 2013-03-14 10:17:33

相關問題

 相關問題