Places to go <div"> Places to go <div"> Places to go <div" />

3列4行のHTMLテーブルをDivsに変更する

私は基本的に私のページレイアウトを持っていますが、私はメインのコンテンツをテーブルに入れました。私はこれを変更する必要があるので、私はもはやテーブルを持っていない、代わりにdivのすべてを持っている。以下は私の主要なdivとデザインのスクリーンショットのための私のコードです、助けていただければ幸いです。

enter image description here

<div id="mainDiv">

Places to go

<div id="divBreak"></div> <table id="mainTable" rules="ROWS" frame="HSIDES"> <tr> <td id="table1">Leeds Castle
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">leeds</td> <td id="columnRight" rowspan="4">Welcome to Maidstone
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.




Where we are Maidstone Map </td> </tr> <tr> <td id="table3">Mote Park
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">Mote Park</td> </tr> <tr> <td id="table5">History Museum
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">Maidstone Museum</td> </tr> <tr> <td id="table7">River Boat
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">Boat</td> </tr> </table> </div>
1

1 答え

divsはブロック要素で、スパンのようなインライン要素が水平方向に1つずつ表示されるのとは対照的に、他の要素の下に(垂直方向に)表示されます。 このデフォルト動作を簡単に変更できることがわかっています。これは、divs http://www.barelyfitz.com/screencast/html-training/css/positioning/

0
追加された