0

HTMLでオブジェクトのような2つのテーブルを作成するにはどうすればよいですか。これらの 2 つの「テーブル」をページの右側に、もう 1 つを左側に配置する必要があります。それらが並列テーブルのようになるように。私が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 に答える