- 问题:
-
其中一列的大小是固定的。不幸的是,无论是在stackoverflow上还是在Google上,我都找不到有效的解决方案。如果我在自己的上下文中实现,那么这里描述的每个解决方案都会失败。目前的解决方案是:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>我得到以下与上述代码:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|请告知。非常感谢!在
- 答案:
-
拆下左立柱上的浮子
在HTML代码中,右列必须在左列之前
如果右边有一个浮动(和一个宽度),如果左边的列没有宽度也没有浮动,它将是灵活的:)
还要对外部div应用一个
溢出:hidden
和一些高度(可以是auto),以便它包围两个内部div最后,在左栏中添加
width:auto
和overflow:hidden
,这将使左栏独立于右栏(例如,如果调整浏览器窗口的大小,右栏与左栏相接触,如果没有这些属性,左栏将环绕右栏,有了这些属性,它将保留在它的空间中)HTML示例:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
2列div布局:右列固定宽度,左侧流体
- 问题:
-
我的要求很简单:2列,右边的列有固定大小。不幸的是,无论是在stackoverflow上还是在Google上,我都找不到有效的解决方案。如果我在自己的上下文中实现,那么这里描述的每个解决方案都会失败。目前的解决方案是:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>我得到以下与上述代码:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|请告知。非常感谢!在
- 答案:
-
拆下左立柱上的浮子
在HTML代码中,右列必须在左列之前
如果右边有一个浮动(和一个宽度),如果左边的列没有宽度也没有浮动,它将是灵活的:)
还要对外部div应用一个
溢出:hidden
和一些高度(可以是auto),以便它包围两个内部div最后,在左栏中添加
width:auto
和overflow:hidden
,这将使左栏独立于右栏(例如,如果调整浏览器窗口的大小,右栏与左栏相接触,如果没有这些属性,左栏将环绕右栏,有了这些属性,它将保留在它的空间中)HTML示例:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
![]() |
![]() |
![]() |