Html divs表，如[关闭]答案

【问题标题】：Html divs tables like [closed]Html divs表，如[关闭]
【发布时间】：2017-07-07 02:51:16
【问题描述】：

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

【问题讨论】：

大声笑，桌子.... 好吧，你没有桌子。对于表格，我们使用元素。看这里的例子：w3schools.com/html/html_tables.asp。啊抱歉我看错了。

标签： html vertical-alignment css-tables

【解决方案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;}

【讨论】：

实际上并没有按我预期的方式工作。它仍然像页面左侧的一张桌子。但无论如何谢谢
红色的“桌子”在左边，蓝色的在红色的右边。下面还添加了一个白色的 div。