Question

我想知道如何在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;
 }

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

Html divs表格如

1 个答案: