我非常难过。很明显,这是一个简单的解决方案,但也许我看不到它。
基本上我有一个内容div,其中包含2个主要div
s - leftSide
和rightside
- 我希望以内联方式显示该内容。每一方都包含其他div
个。无论我尝试什么,rightSide
div
总是会在leftSide
div
下进行展示。
<div id="leftSide">
<h6>MERCHANDISE</h6><a href="http://organthieves.spreadshirt.com" target="_blank"><img src="images/merch.gif" height="220" width="330" border="0" alt="Organ Thieves - Merch Slideshow"/></a>
<div id="twitter">
<div class=hr></div>
<h6>FOLLOW US</h6>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 330,
height: 250,
theme: {
shell: {
background: '#525252',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#b51d1d'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('OrganThieves').start();
</script>
</div><!--end of twitter-->
</div><!--endof leftside-->
<div id="rightSide">
<div id="gigs">
<script type="text/javascript">
var bcGigWidgetWidth=500;
var bcGigWidgetMaxHeight=500;
var bcGigWidgetBackgroundColor="333333";
var bcGigWidgetTextColor="ffffff";
var bcGigWidgetLinkColor="eaeaea";
var bcGigWidgetLineColor="7d7058";
</script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/javascripts/giglistings.js"></script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/gigs/export.js"></script>
</div><!--end gigs-->
</div><!--end of rightSide-->
</div><!--end content-->
#content{
position: relative;
width: 900px;
}
#leftSide{
width: 330px;
position: relative;
}
#twitter{
position: relative;
width:330px;
}
#rightSide{
position: relative;
width: 570px;
background-color: #339;
height:400px;
display: inline;
}
#gigs{
float: right;
width: 500px;
position: relative;
}
答案 0 :(得分:3)
#leftSide
和#rightSide
需要float:left;
另外,请确保他们的父元素足够广泛。
答案 1 :(得分:0)
在这里检查你的代码,左右浮动可以用来水平排列div。