我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
这将是一个很好的例子，说明用表处理起来很简单，而用CSS处理起来很难(如果不是不可能的话，至少在跨浏览器的意义上)。
如果两列的宽度都是固定的，这就很容易了。
如果其中一列的宽度是固定的，这将稍微困难一些，但完全可行。
两个列的宽度可变，恕我直言，你只需要使用一个两列的表。
如果两个宽度都是可变长度，为什么不用一些脚本或服务器端计算宽度呢?
<div style=“width： <=% getTreeWidth（） %>”>Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>
看看现有的CSS布局框架。我推荐Simpl或者稍微复杂一点的Blueprint框架。
如果你正在使用Simpl(它只涉及导入一个simple .css文件)，你可以这样做:
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
，以进行对半布局，或:
<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>
25-75美元。
就是这么简单。
给，这个可能会有帮助……
<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>
这个问题的解决方法其实很简单，但一点也不明显。你必须触发一个叫做“块格式化上下文”(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 >
我不明白为什么人们愿意如此努力地为简单的柱状布局寻找一个纯css解决方案，而使用旧的TABLE标签是如此容易。
所有浏览器仍然有表布局逻辑…也许你可以叫我恐龙，但我说让它帮你。
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2> < tr > <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> . < td背景= " # F0F0F0 " >视图td > < / < / tr > 表> < /
在跨浏览器兼容性方面风险也小得多。
<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>
.btnCont { display: table-layout; width: 500px; } .txtCont { display: table-cell; width: 70%; max-width: 80%; min-width: 20%; } .subCont { display: table-cell; width: 30%; max-width: 80%; min-width: 20%; } <div class="btnCont"> <div class="txtCont"> Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px! </div> <div class="subCont"> This column as well as the entire container works like a table. Isn't Amazing!!! </div> </div>
看看这个解决方案
.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>
一个稍微不同的实现，
两个div面板(内容+额外)，并排，内容面板展开，如果额外面板不存在。
jsfiddle: http://jsfiddle.net/qLTMf/1722/
我刚刚发现了伸缩盒的魔力(显示: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/
如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calc CSS函数:
width: calc(100% - 20px) /* 20px being the first column's width */
这样，第二行的宽度将被计算(即剩余宽度)并响应地应用。
使用钙:
.leftSide { 浮:左; 宽度:50 px; 背景颜色:绿色; ｝ .rightSide { 浮:左; 宽度:calc(100% - 50px); 背景颜色:红色; ｝ < div风格= "宽度:200 px”> < div class = " leftSide " > < / div > < div class = " rightSide“b > < / div > < / div >
这样做的问题是，所有宽度都必须显式定义，要么作为值(px和em可以)，要么作为显式定义本身的内容的百分比。
使用CSS Flexbox flex-grow属性填充剩余空间。 Html, body { 高度:100%; ｝ 身体{ 显示:flex; ｝ 接着{ flex-grow: 1; ｝ < span style="background: #bef;"树> < / div > <div class="second" style="background: #ff9;"视图> < / div >
我写了一个javascript函数，从jQuery $(document).ready()调用。这将解析父div的所有子div，只更新最右边的子div。
html
...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....
javascript
$(document).ready(function(){
stretchDivs();
});
function stretchDivs() {
// loop thru each <div> that has class='stretch'
$("div.stretch").each(function(){
// get the inner width of this <div> that has class='stretch'
var totalW = parseInt($(this).css("width"));
// loop thru each child node
$(this).children().each(function(){
// subtract the margins, borders and padding
totalW -= (parseInt($(this).css("margin-left"))
+ parseInt($(this).css("border-left-width"))
+ parseInt($(this).css("padding-left"))
+ parseInt($(this).css("margin-right"))
+ parseInt($(this).css("border-right-width"))
+ parseInt($(this).css("padding-right")));
// if this is the last child, we can set its width
if ($(this).is(":last-child")) {
$(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
} else {
// this is not the last child, so subtract its width too
totalW -= parseInt($(this).css("width"));
}
});
});
}
你可以使用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编辑器
你可以尝试CSS网格布局。
戴斯。莱纳姆:{ 显示:网格; Grid-template-columns: max-content auto; ｝ dt { grid-column: 1; ｝ dd { grid-column: 2; 保证金:0; background - color: # ccc; ｝ < dl > < dt > lorem ipsum < / dt > <dd>dolor sit meet </dd> < dt >鲤鱼< / dt > < dd >吴廷琰< / dd > < / dl >
使用flexbox这是相当容易的。请参阅下面的代码片段。我添加了一个包装容器来控制流和设置全局高度。还添加了边界以标识元素。注意，div现在也会根据需要展开到全高度。 在现实场景中，应该为flexbox使用供应商前缀，因为它还不完全受支持。
我开发了一个免费的工具来理解和设计使用flexbox的布局。看看这里: http://algid.com/Flex-Designer
.container { 身高:180 px; 边框:3px实心#00f; 显示:flex; 对齐项目:伸展; ｝ div { 显示:flex; 边框:3px solid #0f0; ｝ 接着{ 显示:flex; flex-grow: 1; 边框:3px实体#f00; ｝ < div class = "容器" > < div > < / div >树 < < div class = "第二”>视图/ div > < / div >
flex-grow -定义必要时伸缩项目增长的能力。它接受一个作为比例的无单位值。它规定了项目在伸缩容器内应该占用多少可用空间。
如果所有项都将flex-grow设置为1，则容器中的剩余空间将平均分配给所有子容器。如果其中一个子节点的值为2，那么剩余的空间将占用其他节点两倍的空间(至少它会尝试这样做)。点击这里查看更多信息
.parent { 显示:flex; ｝ .child { flex-grow: 1;//它接受作为比例的无单位值 ｝ .left { 背景:红色; ｝ 铃声{ 背景:绿色; ｝ < div class = "父" > <div class="child left"> 剩下的50% < / div > <div class="儿童权利"> 正确的50% < / 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>
