我不知道我的样式有什么问题.
希望有人可以帮助我.
代码示例：
希望有人可以帮助我.
代码示例：
<style type="text/css">
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; min-height:250px;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
它应该是如Opera浏览器(见图)：
解决方法
怎么样
为什么
>一个人可以直观地假设(就像我曾经做过的)html元素已经有一个确定的高度,但是它不(至少在这个上下文中).幸运的是(或通过设计)这个元素具有独特的属性,它的高度可以在分配一个百分比高度时被确定.这是基本概念,因为为了计算(确定)分配了百分比高度的任何其他元素的高度,您还必须能够确定其父级的高度.
>任何曾经使用CSS和DOM的人都可能会告诉你他们讨厌浮动.这是因为它将元素从流中拉出,这需要额外的工作和思考来弥补效果.而是使用display：inline-block; vertical-align：top;有一个警告,您将不得不在这些元素之间的任何空白处添加html注释.
CSS
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px;min-height:250px;
/*changes*/
height:100%;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
/*changes*/
float:none;
display:inline-block;
vertical-align:top;
}
.right_inner {
float:left; width:150px; background:#C93;
/*changes*/
float:none;
display:inline-block;
vertical-align:top;
}
/*changes*/
html,body{
height:100%;
}
HTML
<div class="maindiv">
<div class="left_inner">Left Block content</div><!--
--><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
