我正在试图找出如何格式化下面的代码，以便前两个信息块并排显示，然后显示第三个信息块位于其下方。我尝试使用css的列表样式来格式化它，但似乎并不适合我。
帮助/建议？
<div class="inauguration-content">
<h3>Inauguration</h3>
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center</p>
<h3>Inaugural Gala</h3>
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation</p>
<h3>Important Information for Delegates</h3>
<a href="http://www.herkimer.edu/admissions/directions/" target="_blank">Direction to HCCC</a><br />
<a href="http://www.herkimer.edu/pdfs/campusmap.pdf" target="_blank">Campus Map</a><br />
<a href="http://www.herkimer.edu/admissions/hotels/" target="_blank">Lodging Information</a><br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.</p>
</div>
答案 0 :(得分：2)
你可以创建三个div。
上面将动态打包三个div以适应任何包装和垂直增长（包括由于用户为了可访问目的而增加字体大小）在三个div中的任何一个内。
<html><body>
<div style="width:50%; float:left">
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center
</div>
<div style="width:50%; float:right">
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation
</div>
<div style="width:50%; margin-left:auto; margin-right:auto; clear:both">
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.
</div>
</body></html>
答案 1 :(得分：1)
只是为了好玩，这是您想要使用列表的布局。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>container Title</title>
<style type="text/css" media="screen">
body {
font-family:Georgia;
}
#container {
width:700px;
margin:0 auto;
}
ul {
display:block;
margin:0;
padding:0px;
width:50%;
float:left;
}
ul.full {
margin:0 auto;
float:none;
clear:both;
padding-top:5px;
}
ul li {
list-style-type:none;
margin:0;
padding:0;
padding-left:10px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><h4>Inauguration</h4></li>
<li>Friday, April 17, 2009</li>
<li>3:00 p.m.</li>
<li>Sarkus-Busch Theater</li>
<li>Robert McLaughlin College Center</li
></ul>
<ul>
<li><h4>Inaugural Gala</h4></li>
<li>7-11 p.m.</li>
<li>Robert McLaughlin College Center</li>
<li>Featuring hors d'oeuvres, open bar and dinner and dessert stations</li>
<li>Entertainment by Frankie Michaels</li>
<li>Cocktail Attire Recommended</li>
<li>Tickets are $100 per person</li>
<li>Proceeds benefit the Herkimer County College Foundation</li>
</ul>
<ul class="full">
<li><h4>Important Information for Delegates</h4></li>
<li>Direction to HCCC</li>
<li>Campus Map</li>
<li>Lodging Information</li>
<li>Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.</li>
<li>Delegates are expected to furnish their own academic regalia. </li>
</ul>
</div>
</body>
</html>
答案 2 :(得分：0)
我不会用列表来设置它，只需使用div。
<style type="text/css">
.left { float:left; }
.right { float:right; }
.half { width:50%; }
.centered { text-align:center; }
// from http://www.webtoolkit.info/css-clearfix.html
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
<div class="clearfix">
<div style="left half">
<strong>Inauguration</strong><br />
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center<br />
</div>
<div style="right half">
<strong>Inaugural Gala</strong><br />
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation<br />
</div>
</div>
<div class="centered">
<strong>Important Information for Delegates</strong><br />
Direction to HCCC<br />
Campus Map<br />
Lodging Information<br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.<br />
</div>
答案 3 :(得分：0)
<div style="width:49%; float:left"><p>
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center</p>
</div>
<div style="width:49%; float:left"><p>
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation</p>
</div>
<div style="width:50%;margin:auto "><p>
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should
report to the Open Student Area, first floor of the
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.</p>
</div>