我想要一个两列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>
其他回答
看看这个解决方案
.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>
我不明白为什么人们愿意如此努力地为简单的柱状布局寻找一个纯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布局框架。我推荐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美元。
就是这么简单。
.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>
使用钙:
.leftSide { 浮:左; 宽度:50 px; 背景颜色:绿色; ｝ .rightSide { 浮:左; 宽度:calc(100% - 50px); 背景颜色:红色; ｝ < div风格= "宽度:200 px”> < div class = " leftSide " > < / div > < div class = " rightSide“b > < / div > < / div >
这样做的问题是，所有宽度都必须显式定义，要么作为值(px和em可以)，要么作为显式定义本身的内容的百分比。
