我想要一个两列div布局,其中每一个都可以有可变的宽度。

div { 浮:左; } 接着{ 背景:# ccc; } < div > < / div >树 < < div class = "第二”>视图/ div >

我想要“视图”div扩展到整个可用的宽度后,“树”div已经填补了所需的空间。

目前,我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。


不可重复声明:

当设置float:left时,将div扩展到最大宽度 因为左边的宽度是固定的。 帮助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>

我不明白为什么人们愿意如此努力地为简单的柱状布局寻找一个纯css解决方案,而使用旧的TABLE标签是如此容易。

所有浏览器仍然有表布局逻辑…也许你可以叫我恐龙,但我说让它帮你。

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2> < tr > <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> . < td背景= " # F0F0F0 " >视图td > < / < / tr > 表> < /

在跨浏览器兼容性方面风险也小得多。

你可以尝试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 >

这将是一个很好的例子,说明用表处理起来很简单,而用CSS处理起来很难(如果不是不可能的话,至少在跨浏览器的意义上)。

如果两列的宽度都是固定的,这就很容易了。

如果其中一列的宽度是固定的,这将稍微困难一些,但完全可行。

两个列的宽度可变,恕我直言,你只需要使用一个两列的表。

使用钙:

.leftSide { 浮:左; 宽度:50 px; 背景颜色:绿色; } .rightSide { 浮:左; 宽度:calc(100% - 50px); 背景颜色:红色; } < div风格= "宽度:200 px”> < div class = " leftSide " > < / div > < div class = " rightSide“b > < / div > < / div >

这样做的问题是,所有宽度都必须显式定义,要么作为值(px和em可以),要么作为显式定义本身的内容的百分比。