将3列4行HTML表格更改为Divs

Question

我基本上有我的页面布局，但是我已将主要内容放在主div中的表格中。我需要更改它，所以我不再有一个表，而是将它全部放在div中。下面是我的主要div的代码和设计的截图，帮助将不胜感激。

<div id="mainDiv">
<h1>Places to go</h1>
<div id="divBreak"></div>
<table id="mainTable" rules="ROWS" frame="HSIDES">
<tr>
<td id="table1"><strong>Leeds Castle</strong><br>
Considered one of the most romantic castles in England, this historic site was originally       the stately home of the Saxon royal family during the reign of Ethelbert IV in 856-860.</td>
<td id="table2"><img class="imageTable" src="./images/leeds.jpg" alt="leeds"      name="imageTable"></td>
<td id="columnRight" rowspan="4"><strong>Welcome to Maidstone</strong><br>
Maidstone is the county town of Kent, England, 32 miles (51 km) south-east of London. The   River Medway runs through the centre of the town linking Maidstone to Rochester and the Thames   Estuary. Historically, the river was a source and route for much of the town's trade.   Maidstone was the centre of the agricultural county of Kent, known as the Garden of England.     There is evidence of a settlement in the area dating back to beyond the Stone Age. The town is   within the borough of Maidstone. In 2001, the town had a population of 75,070. Maidstone's    economy has changed over the years from being involved in heavy industry, to more light and    service industries.<br>
<br>
<br>
<br>
<br>
<strong>Where we are</strong> <img src="./images/maidstone_map.gif" alt="Maidstone Map">    </td>
</tr>
<tr>
<td id="table3"><strong>Mote Park</strong><br>
Maidstone's largest park, is set in 450 acres of historic parkland. Within walking  distance of Maidstone town centre it offers a pleasant and relaxing enviroment, making it a  great place to spend the day.</td>
<td id="table4"><img class="imageTable" src="./images/mote.jpg" alt="Mote Park"   name="imageTable"></td>
</tr>
<tr>
<td id="table5"><strong>History Museum</strong><br>
Our exceptional Museum is housed in a charming Elizabethan Manor House, in the centre of  Maidstone - Kent's County Town. Each gallery will fascinate and surprise; with a wealth of  exhibits and objects to see and enjoy as well as regular storytelling and children's holiday  activities. Entry to our Museum is Free!</td>
<td id="table6"><img class="imageTable" src="./images/museum.jpg" alt="Maidstone Museum"   name="imageTable"></td>
</tr>
<tr>
<td id="table7"><strong>River Boat</strong><br>
The Kentish Lady river boat offers a unique experience of the River Medway from a 1 hour  trip to 3 hour cruises and is also the perfect setting for a private party.</td>
<td id="table8"><img class="imageTable" src="./images/boat.jpg" alt="Boat"  name="imageTable"></td>
</tr>
</table>
</div>

Answer 1

div是块元素，自然地显示一个在另一个之下（垂直），而不是内联元素，如跨度，水平地一个接一个地显示。 知道您可以轻松更改此默认行为。这是一个非常简单的5分钟教程，将向您展示如何使用div http://www.barelyfitz.com/screencast/html-training/css/positioning/创建类似于显示的表格。