0

我想知道如何在 html 中创建两个像对象一样的表。我需要这两个“表格”在右侧一个，另一个在页面的左侧。这样它们就像平行表一样。每当我尝试使用 div 时，左侧的位置非常好，但右侧看起来像是另一个的延续，我的意思是它的垂直对齐在中间的某个地方，就在第一个结束的地方“表”结束。

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;
 }
4

1 回答 1

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-13T22:05:14.433 回答