我无法让这最后一个div在我的布局中正确运行并尝试了无数的东西。我不确定我的CSS会发生什么事？ 以下是截图：http://img291.imageshack.us/img291/5377/screenshot20100528at123.png
#events {
float: left;
width: 420px;
margin:0 0 5px 0;
font-family:Helvetica, Arial, sans-serif;
font-size: 16px;
background-image: url(images/lastfmhead.jpg);
background-repeat: no-repeat;
height:360px;
overflow:hidden;
display: inline;
}
#events table {
width:419px;
}
#events th, td {
padding: 3px 3px;
}
#whatsup ul, #citywhatsup ul {
margin:0 5px 0 5px;
text-align:left;
font-family:Helvetica, Arial, sans-serif;
}
#whatsup ul li, #citywhatsup ul li{
list-style-type:none;
list-style: none;
}
#whatsup hr, #citywhatsup hr{
border: none 0;
border-top: 1px dashed #990000;/*the border*/
width: 100%;
height: 1px;
margin: 1px auto 5px auto;/*whatever the total width of the border-top and border-bottom equal*/
}
#events ul {
margin:5px 5px 0 5px;
}
#events ul li{
list-style-type:none;
list-style: none;
}
#attending ul {
display: inline-block;
margin: 0;
width:200px;
}
#attending ul li {
display: inline-block;
list-style-image:none;
margin:0;
padding:2px 5px 2px 5px;
}
#attending {
width: 230px;
margin:0 13px 5px 12px;
float: left;
display: inline;
background-image: url(images/otherhead.jpg);
background-repeat: no-repeat;
text-align:center;
height:360px;
overflow:hidden;
}
#whatsup {
width: 230px;
margin:0 0 5px 0;
float: left;
display:inline;
background-image: url(images/otherhead.jpg);
background-repeat: no-repeat;
text-align:center;
}
#eventtitle{
margin: 3px 0 -3px 0;
}
#eventtitle {
color: #900;
margin-left: 5px;
font-size:16px;
}
#tweetit {
color: #487B96 !important;
font-size:16px;
margin: 3px 0 -4px 0;
}
#photos {
background-image: url(images/flickrheader.jpg);
background-repeat: no-repeat;
width: 665px;
clear:both;
}
<div id="cityevents">
<h2> Events </h2>
<table>
<th>Date </th><th> Who's Playing </th><th> Venue </th><th> City </th><th> Tickets </th>
<tr><td>May 28</td><td><a href='http://www.songkick.com/concerts/5384486?utm_source=1121&utm_medium=partner' target='_blank'>Jill King</a></td><td>Open Eye Cafe</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 28</td><td><a href='http://www.songkick.com/concerts/5281141?utm_source=1121&utm_medium=partner' target='_blank'>Ahleuchatistas</a></td><td>Nightlight</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 28</td><td><a href='http://www.songkick.com/concerts/4970896?utm_source=1121&utm_medium=partner' target='_blank'>Sam Quinn</a></td><td>Local 506</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/5303661?utm_source=1121&utm_medium=partner' target='_blank'>Cagematch Mayhem, Champion Vs Au Jus, Heartbreaker Vs Au Jus</a></td><td>DSI Comedy Theater</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5303661/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4722066?utm_source=1121&utm_medium=partner' target='_blank'>Lewd Acts, Converge, Gaza, Black Breath</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4722066/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4647076?utm_source=1121&utm_medium=partner' target='_blank'>Nate Currin</a></td><td>Broad Street Cafe</td><td>Durham</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/5580211?utm_source=1121&utm_medium=partner' target='_blank'>International Night</a></td><td>Serena Rtp</td><td>Durham</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5580211/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4770241?utm_source=1121&utm_medium=partner' target='_blank'>Jill King</a></td><td>Caffe Driade</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/5406411?utm_source=1121&utm_medium=partner' target='_blank'>Sunbears!</a></td><td>Local 506</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 29</td><td><a href='http://www.songkick.com/concerts/4924136?utm_source=1121&utm_medium=partner' target='_blank'>Studio Gangsters</a></td><td>The Reservoir</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 30</td><td><a href='http://www.songkick.com/concerts/5252161?utm_source=1121&utm_medium=partner' target='_blank'>She Wants Revenge</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>May 30</td><td><a href='http://www.songkick.com/concerts/4436326?utm_source=1121&utm_medium=partner' target='_blank'>Unheard Radio Battle of the Bands</a></td><td>Mansion 462</td><td>Chapel Hill</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4436326/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>May 30</td><td><a href='http://www.songkick.com/concerts/4924141?utm_source=1121&utm_medium=partner' target='_blank'>Studio Gangsters</a></td><td>The Cave</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 2</td><td><a href='http://www.songkick.com/concerts/5252881?utm_source=1121&utm_medium=partner' target='_blank'>Jeanne Jolly</a></td><td>Caffe Driade</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 2</td><td><a href='http://www.songkick.com/concerts/4628026?utm_source=1121&utm_medium=partner' target='_blank'>James Husband, Of Montreal</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4628026/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 2</td><td><a href='http://www.songkick.com/concerts/5019466?utm_source=1121&utm_medium=partner' target='_blank'>Camera Obscura</a></td><td>Duke Gardens</td><td>Durham</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5019466/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 3</td><td><a href='http://www.songkick.com/concerts/4226511?utm_source=1121&utm_medium=partner' target='_blank'>Reverend Horton Heat, Cracker, Legendary Shack Shakers</a></td><td>Cat's Cradle</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/4226511/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 3</td><td><a href='http://www.songkick.com/concerts/5253371?utm_source=1121&utm_medium=partner' target='_blank'>American Aquarium</a></td><td>Local 506</td><td>Chapel Hill</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 4</td><td><a href='http://www.songkick.com/concerts/4285251?utm_source=1121&utm_medium=partner' target='_blank'>Laurence Juber</a></td><td>The ArtsCenter</td><td>Carrboro</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr><tr><td>Jun 4</td><td><a href='http://www.songkick.com/concerts/5642566?utm_source=1121&utm_medium=partner' target='_blank'>Community Jam, Pt Scarborough Is a Movie, Armageddon'it</a></td><td>DSI Comedy Theater</td><td>Carrboro</td><td style='text-align:center;'><a href='http://www.songkick.com/concerts/5642566/tickets?utm_source=1121&utm_medium=partner' target='_blank'> Find </a></td></tr><tr><td>Jun 4</td><td><a href='http://www.songkick.com/concerts/4676216?utm_source=1121&utm_medium=partner' target='_blank'>Big Bill Morganfield</a></td><td>Papa Mojos Roadhouse</td><td>Durham</td><td style='text-align:center;'><span style='color: #999'> Find </span></td></tr> </table>
</div> <!-- Events -->
<div id="citywhatsup">
<h2> What's Up?
<div id="tweetit"><a class="btn-slide">Tell em'</a>
</div></h2>
<div id="twitpanel"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#twitpanel").tweetBox({
height: 100,
width: 215,
label: '',
defaultContent: ""
});
});
</script>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#whatsup").linkifyUsers();
});
</script>
<ul>
<li><img src='http://a1.twimg.com/profile_images/898693876/4604414396_0464180430_b_normal.jpg' alt='kaiten_keiku' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @kaiten_keiku: <span style='text-align:justify;'>@Charlotte_Nao ありがとうでしゅ～さみしくなんかない！</span> - <span class='twittertime'>May 28 12:37AM</span></li><hr/><li><img src='http://a3.twimg.com/profile_images/612153581/bowdown_normal.jpg' alt='bugn' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @bugn: <span style='text-align:justify;'>@Bravotv (sitc2 as rhony) Bethenny-Carrie, Sonja-Samantha, Alex-Miranda, Ramona-Charlotte</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a1.twimg.com/profile_images/844630278/mj_normal.jpg' alt='Myra_Jones' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @Myra_Jones: <span style='text-align:justify;'>@t_weet123 If you're still in Charlotte then you need to head to Whiskey River...they say Luke B. just walked in and started drinking.</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a1.twimg.com/profile_images/936667468/110971230_normal.jpg' alt='THEORACLE2' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @THEORACLE2: <span style='text-align:justify;'>@MsKamilah08 are yall in charlotte?</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a1.twimg.com/profile_images/767244842/7AM_normal.jpg' alt='mtollefsrud' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @mtollefsrud: <span style='text-align:justify;'>@vosler09 thinks I'm Charlotte.</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a3.twimg.com/profile_images/936496517/DSCF0317_-_Copy_normal.JPG' alt='Thasian' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @Thasian: <span style='text-align:justify;'>I like #CharMeck #Charlotte | Atlanta = #No #FAIL #EPICFAIL</span> - <span class='twittertime'>May 28 12:36AM</span></li><hr/><li><img src='http://a3.twimg.com/profile_images/695551715/NASCAR_logo_flag_normal.jpg' alt='NascarNewsNow' height=40px; width=40px; style='border:0px; float: left; padding-right:4px;'/> @NascarNewsNow: <span style='text-align:justify;'>#NASCAR #RACING News from the track: Charlotte Motor Speedway | Nascar Leath: Ahh, the waiting is... http://bit.ly/b2DToq #NHRA #DAYTONA500</span> - <span class='twittertime'>May 28 12:35AM</span></li> </ul>
</div>
<div id="photos">
<h2> Recent Photos </h2>
<ul>
<li><a href='http://farm5.static.flickr.com/4029/4646832962_980f936db9.jpg' target='_blank' rel='lightbox-photos' title='05 23 10 Jamie's Baby Shower 097'><img src='http://farm5.static.flickr.com/4029/4646832962_980f936db9_t.jpg' alt='05 23 10 Jamie's Baby Shower 097' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm4.static.flickr.com/3176/4646218481_d06829a778.jpg' target='_blank' rel='lightbox-photos' title='summer'><img src='http://farm4.static.flickr.com/3176/4646218481_d06829a778_t.jpg' alt='summer' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4032/4646833312_7b1de5390a.jpg' target='_blank' rel='lightbox-photos' title='100_0064'><img src='http://farm5.static.flickr.com/4032/4646833312_7b1de5390a_t.jpg' alt='100_0064' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4008/4646832834_784a0a9ed1.jpg' target='_blank' rel='lightbox-photos' title=''><img src='http://farm5.static.flickr.com/4008/4646832834_784a0a9ed1_t.jpg' alt='' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4066/4646218735_b37d8fd9e5.jpg' target='_blank' rel='lightbox-photos' title='DSC05524'><img src='http://farm5.static.flickr.com/4066/4646218735_b37d8fd9e5_t.jpg' alt='DSC05524' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4054/4646830604_97afd54623.jpg' target='_blank' rel='lightbox-photos' title='DTLA graff'><img src='http://farm5.static.flickr.com/4054/4646830604_97afd54623_t.jpg' alt='DTLA graff' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4066/4646833048_7a9ab28733.jpg' target='_blank' rel='lightbox-photos' title='100_0243.jpg'><img src='http://farm5.static.flickr.com/4066/4646833048_7a9ab28733_t.jpg' alt='100_0243.jpg' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm4.static.flickr.com/3399/4646832626_de89d0fb0e.jpg' target='_blank' rel='lightbox-photos' title='6W看到心跳'><img src='http://farm4.static.flickr.com/3399/4646832626_de89d0fb0e_t.jpg' alt='6W看到心跳' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4005/4646832826_0d9e8afe19.jpg' target='_blank' rel='lightbox-photos' title='IMG_9381'><img src='http://farm5.static.flickr.com/4005/4646832826_0d9e8afe19_t.jpg' alt='IMG_9381' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4046/4646830752_dfc32b1740.jpg' target='_blank' rel='lightbox-photos' title='11'><img src='http://farm5.static.flickr.com/4046/4646830752_dfc32b1740_t.jpg' alt='11' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4010/4646215929_80b78f0007.jpg' target='_blank' rel='lightbox-photos' title='GEDC8592'><img src='http://farm5.static.flickr.com/4010/4646215929_80b78f0007_t.jpg' alt='GEDC8592' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4064/4646832384_7fc8d31e11.jpg' target='_blank' rel='lightbox-photos' title='2010 Advanced Grappling'><img src='http://farm5.static.flickr.com/4064/4646832384_7fc8d31e11_t.jpg' alt='2010 Advanced Grappling' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4049/4646218143_c108276325.jpg' target='_blank' rel='lightbox-photos' title='P1270352'><img src='http://farm5.static.flickr.com/4049/4646218143_c108276325_t.jpg' alt='P1270352' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4009/4646217767_3900f39475.jpg' target='_blank' rel='lightbox-photos' title='P1270351'><img src='http://farm5.static.flickr.com/4009/4646217767_3900f39475_t.jpg' alt='P1270351' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4027/4646831284_30b6e6da36.jpg' target='_blank' rel='lightbox-photos' title='Image245'><img src='http://farm5.static.flickr.com/4027/4646831284_30b6e6da36_t.jpg' alt='Image245' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm4.static.flickr.com/3399/4646218295_63a899d322.jpg' target='_blank' rel='lightbox-photos' title='IMG_0037'><img src='http://farm4.static.flickr.com/3399/4646218295_63a899d322_t.jpg' alt='IMG_0037' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4059/4646218159_01d5b02c3f.jpg' target='_blank' rel='lightbox-photos' title='DooDah2010-6665'><img src='http://farm5.static.flickr.com/4059/4646218159_01d5b02c3f_t.jpg' alt='DooDah2010-6665' height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://farm5.static.flickr.com/4053/4646834404_615e09b715.jpg' target='_blank' rel='lightbox-photos' title='IMG_2668'><img src='http://farm5.static.flickr.com/4053/4646834404_615e09b715_t.jpg' alt='IMG_2668' height=100px; width=100px; style='border:0px;'/></a></li> </ul>
</div>
<div id="videos">
<h2> Recent Videos </h2>
<ul>
<li><a href='http://www.youtube.com/watch?v=_oc5-0yFoYg&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/_oc5-0yFoYg/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=1pRXKeYVYHc&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/1pRXKeYVYHc/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=yzRQUu-ZBdw&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/yzRQUu-ZBdw/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=mud-A76nLro&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/mud-A76nLro/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=TLOboW19_OA&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/TLOboW19_OA/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=PcYja2jjvi0&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/PcYja2jjvi0/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=KKjklCEMrPk&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/KKjklCEMrPk/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=AyUwY6PRX0Y&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/AyUwY6PRX0Y/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=8Sf2-7RjVYs&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/8Sf2-7RjVYs/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=xGMayoJmhE8&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/xGMayoJmhE8/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=paseBeB6Cb8&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/paseBeB6Cb8/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li><li><a href='http://www.youtube.com/watch?v=l_FSRUtMMik&feature=youtube_gdata' target='_blank'><img src='http://i.ytimg.com/vi/l_FSRUtMMik/default.jpg'height=100px; width=100px; style='border:0px;'/></a></li> </ul>
</div>
</div><!-- #content -->
答案 0 :(得分：0)
我认为这是因为你有明确的：两者;在#photos。 Clear将创建一个顶部边距来清除浮动元素。
答案 1 :(得分：0)
只需将右侧边栏更改为浮动：右侧而不是浮动：左侧。