我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
当前回答
.container{ display: flex; align-items: stretch; } .resize_overflow { position: relative; width: 0; overflow: hidden; white-space: nowrap; word-wrap: normal; /* text-overflow: ellipsis; When the end of the line dissolves, the ellipsis loses */ } .second_fix { float: right; /* or: display: flex; align-self: end;*/ } /* Dissolve the end of the line at the right edge */ .resize_overflow::after { content: ""; /* Empty content */ position: absolute; /* Position relative to parent */ right: 0; /* Element position */ top: 0; /* Element position */ width: 40px; /* Gradient width */ height: 100%; /* Parent Height */ background: -moz-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: -webkit-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: -o-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: -ms-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: linear-gradient(to right, rgba(255,255,255, 0.2), #ff 100%); } <div class="container"> <div class="resize_overflow">Tree</div> <div class="second_fix">View</div> </div>
其他回答
我刚刚发现了伸缩盒的魔力(显示: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盒子给了我15年来一直希望css能给我的控制。终于到了!更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
你可以使用W3的CSS库，它包含了一个叫做rest的类:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> < div class = " w3-row”> <div class="w3-col " style="width:150px"> < p > 150 px < / p > < / div > <div class="w3-rest w3-green"> < p > w3-rest < / p > < / div > < / div >
不要忘记在页面的标题中链接CSS库:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
这里是官方演示:W3学校Tryit编辑器
这个问题的解决方法其实很简单，但一点也不明显。你必须触发一个叫做“块格式化上下文”(BFC)的东西，它以特定的方式与浮点数交互。
只需使用第二个div，删除浮动，并将其赋值为overflow:hidden。任何不可见的溢出值都会使它所设置的块成为BFC。bfc不允许后代浮体逃离它们，也不允许兄弟姐妹/祖先浮体入侵它们。这里的净效果是，浮动的div将做它的事情，然后第二个div将是一个普通的块，占用所有可用的宽度，除了浮动占用的宽度。
这应该适用于所有当前的浏览器，尽管你可能必须在IE6和7中触发hasLayout。我想不起来了。
演示:
固定左:http://jsfiddle.net/A8zLY/5/ 固定权限:http://jsfiddle.net/A8zLY/2/
div { 浮:左; ｝ 接着{ 背景:# ccc; 浮:没有; 溢出:隐藏; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
<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="right">View</div> <div style="width: <=100% getTreeWidth()100 %>">Tree</div> <div class="clear" /> </div> <div class="ColumnWrapper"> <div class="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> </div> </body> </html>
我不确定这是否是你所期待的答案，但是，为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?
