Anu*_*yal 518 html css multiple-columns
我想要一个双列div布局,其中每个都可以有可变宽度,例如
div {
float: left;
}
.second {
background: #ccc;
}<div>Tree</div>
<div class="second">View</div>我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度.目前我的'view'div被调整为它包含的内容.如果两个div占据整个高度也会很好
不重复免责声明:
当float:left设置时,将div扩展到max width, 因为左边的一个具有固定的宽度.
帮助div - 使div适合剩余的宽度, 因为我需要两个向左对齐的列
Xan*_*hir 988
这个问题的解决其实很容易,但不是在所有明显.您必须触发称为"块格式化上下文"(BFC)的东西,它以特定方式与浮点交互.
只需要取第二个div,移除浮子,然后再给它overflow:hidden.除可见之外的任何溢出值都会使其设置的块成为BFC.BFC不允许后代漂浮物逃脱它们,它们也不允许兄弟/祖先漂浮物侵入它们.这里的净效果是浮动的div将完成它的事情,然后第二个div将是一个普通的块,占用除浮点占用的所有可用宽度.
这应该适用于所有当前浏览器,但您可能必须在IE6和7中触发hasLayout.我不记得了.
演示:
B T*_*B T 92
我刚刚发现了弹性盒子的魔力(显示:flex).试试这个:
<style>
#box {
display: flex;
}
#b {
flex-grow: 100;
border: 1px solid green;
}
</style>
<div id='box'>
<div id='a'>Tree</div>
<div id='b'>View</div>
</div>
Flex盒子给了我我希望css拥有15年的控制权.它终于来了!更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
cle*_*tus 27
这将是一个很好的例子,可以解决表格问题,并且很难(至少在跨浏览器的意义上,如果不是不可能的话)使用CSS.
如果两列都是固定宽度,这将很容易.
如果其中一列是固定宽度,这将稍微困难但完全可行.
两列可变宽度,恕我直言,你需要使用两列表.
小智 22
检查此解决方案
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.content {
background-color: red;
height: 200px;
width: auto;
margin-left: 200px;
}
.item {
width: 25%;
background-color: blue;
float: left;
color: white;
}
.clearfix {
clear: both;
}<div class="container">
<div class="clearfix"></div>
<div class="sidebar">width: 200px</div>
<div class="content">
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
</div>
</div>Reg*_*ham 17
html, body {
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.second {
flex-grow: 1;
}<div class="wrapper">
<div style="background: #bef;">Tree</div>
<div class="second" style="background: #faa;">View</div>
</div>注意:如果您的支持的浏览器需要,请添加flex供应商前缀.
小智 15
在这里,这可能有帮助......
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="clear" />
</div>
</body>
</html>小智 14
用途calc:
.leftSide {
float: left;
width: 50px;
background-color: green;
}
.rightSide {
float: left;
width: calc(100% - 50px);
background-color: red;
}<div style="width:200px">
<div class="leftSide">a</div>
<div class="rightSide">b</div>
</div>这个问题是必须明确定义所有宽度,或者作为值(px和em工作正常),或者作为显式定义的东西的百分比.
如果另一列的宽度是固定的，那么使用适用于所有常见浏览器的calcCSS 功能如何：
width: calc(100% - 20px) /* 20px being the first column's width */
这样，第二行的宽度将被计算（即剩余宽度）并响应应用。
小智 5
我不明白为什么人们愿意如此努力地为简单的柱状布局找到纯CSS解决方案,这些布局使用旧TABLE标签很容易.
所有浏览器仍然具有表格布局逻辑......或许叫我恐龙,但我说让它帮助你.
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
<tr>
<td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
<td bgcolor="#F0F0F0">View</td>
</tr>
</table>在跨浏览器兼容性方面风险也低得多.
| 归档时间： |
|
| 查看次数： |
302264 次 |
| 最近记录： |