<div id="content">
<div id="outer">
<div id="header">Transport</div>
<div id="image">
<img src="../images/img1.jpg" style="width:300px;height:300px"/>
</div>
<div id="right_content">large amount of text</div>
</div>
</div>
对于上面所用的css是:
#content {
width: 100%;
min-height: 600px;
overflow: hidden;
border: 1px solid;
padding: 0;
margin: 0;
}
#outer {
border: 1px solid;
float: left;
overflow: hidden;
width: 100%;
min-height: 200px;
}
#header {
border: 1px solid;
width: 100%;
height: 20px;
background-color: #006A4D;
color: #ffffff;
padding: 10px;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 18px;
clear: both;
overflow: auto;
}
#right_content {
border: 1px solid;
overflow: hidden;
min-height: 300px;
padding: 10px;
float: left;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
#image {
border: 1px solid;
min-width: 300px;
min-height: 300px;
padding: 10px;
float: left;
overflow: hidden;
}
两个内部div都是float:left
。但是输出是一个低于另一个的div。我怎样才能让它们并排出现?
答案 0 :(得分:4)
http://jsfiddle.net/gaby/zv4zG/
对我有用要记住的是,如果您没有为浮动元素指定宽度,并且它们的大小增加以容纳其内容,则它们可能达到一个大小(添加时)超过其容器宽度。那时他们会休息,一个会低于另一个。
因此,您必须确保其添加的宽度(和水平填充和边距)永远不会超过其容器宽度。
答案 1 :(得分:4)
外部div具有100%的宽度,巫婆告诉浏览器将所有可用宽度都设置为ocupy,这就是为什么第二个div降到了下面。
解决方案很简单,确保两个div都有足够的宽度可以并排。
答案 2 :(得分:3)
您无需浮动#right_content
,只需添加足够宽的左边距以容纳图像并放下overflow
:
#right_content{
border: 1px solid;
min-height: 300px;
padding: 10px;
margin-left: 322px;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
答案 3 :(得分:1)
DIV是块级元素,这意味着默认情况下它们将垂直堆叠。为了使它们并排显示,您还需要在CSS中设置display: inline;
。
<强>更新强>
我刚创建了这个jsfiddle,看起来您的布局很好......不确定问题是什么。它可能是浏览器特定的吗?
答案 4 :(得分:1)
我给了#image
和#outer
一个宽度#right_content
一个负余量来计算#image
的空格。
答案 5 :(得分:0)
当我们为div中的一个赋予宽度时,它会为下一个div留出额外的空间,但要确保两个div的宽度都不超过浏览器的宽度,否则第二个div将移动到第一个div以下DIV。这个css对我有用:
#left{
display:inline;
width:50%;
float:left;
}
#right{
float:left;
}
&#13;
<div id="left">
left div
</div>
<div id="right">
right div
</div>
&#13;