展开div以获取剩余宽度

时间：2009-08-11 12:46:16

标签： html css css3 multiple-columns

我想要一个双列div布局，其中每个布局都可以有可变宽度，例如

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

我希望'tree'div扩展到'tree'div填充所需空间后可用的整个宽度。 目前，我的“视图”div已调整为其包含的内容 如果两个div占据整个高度也是好的

不重复免责声明：

Expand div to max width when float:left is set 因为那里左边有一个固定的宽度。

Help with div - make div fit the remaining width 因为我需要两列都对齐左边

21 个答案:

答案 0 :(得分：971)

对此的解决方案实际上非常简单，但所有显然不是。你必须触发一个叫做“块格式化上下文”（BFC）的东西，它以特定的方式与浮动交互。

取第二个div，移除浮动，然后改为overflow:hidden。除可见之外的任何溢出值都会使其设置的块成为BFC。 BFC不允许后代漂浮物逃脱它们，它们也不允许兄弟/祖先漂浮物侵入它们。这里的净效果是浮动的div将完成它的事情，然后第二个div将是一个普通的块，占用所有可用的宽度，除了由浮动占用的。

这应适用于所有当前浏览器，但您可能必须在IE6和7中触发hasLayout。我无法回想起。

<强>演示：

答案 1 :(得分：79)

我刚刚发现了弹性盒子的魔力（显示：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/

答案 2 :(得分：26)

这将是一个很好的例子，可以解决表格问题，并且很难（至少在跨浏览器的意义上，如果不是不可能的话）使用CSS。

如果两列都是固定宽度，这很容易。

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

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

答案 3 :(得分：21)

检查此解决方案

.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>

答案 4 :(得分：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>

答案 5 :(得分：12)

使用const string inputFile = @"..\TheRelativeRouteToYourEdmxFileGoesHere.edmx"; ：

calc
.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

这个问题是必须明确定义所有宽度，或者作为值（px和em工作正常），或者作为明确定义的东西的百分比。

答案 6 :(得分：11)

Flexbox解决方案

＆＃13;
＆＃13; 
html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
＆＃13; 
<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>
＆＃13;
＆＃13;
＆＃13;

注意：如果supported browsers需要，请添加Flex供应商前缀。

答案 7 :(得分：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>

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

答案 8 :(得分：3)

<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="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>

答案 9 :(得分：3)

您可以尝试CSS Grid Layout。

＆＃13;
＆＃13; 
dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
＆＃13; 
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>
＆＃13;
＆＃13;
＆＃13;

答案 10 :(得分：1)

感谢Simple.css的插件！

请记住将所有列包装在ColumnWrapper中。

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

我即将发布Simple.css的1.0版，所以请帮忙传播这个词！

答案 11 :(得分：1)

帕特 - 你是对的。这就是为什么这个解决方案能满足“恐龙”和同时代人的原因。 ：）

.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>

答案 12 :(得分：1)

flex-grow-这定义了伸缩项在必要时增长的能力。它接受作为比例的无单位值。它决定了该项目应在flex容器内占用多少可用空间。

如果所有项目的flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占其他孩子的两倍（或者至少会尝试）。查看更多here 

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

答案 13 :(得分：1)

略有不同的实现，

如果content panel不存在，两个div面板（内容+额外）并排，extra panel会展开。

jsfiddle：http://jsfiddle.net/qLTMf/1722/

答案 14 :(得分：1)

如果另一列的宽度是固定的，那么使用calc CSS函数working for all common browsers怎么样：

getMenuR :: Handler Html
getMenuR = do
  let rows = query

  defaultLayout $ do
    $(widgetFile "menu")

query = do
  cats <- selectList [] [Asc CategoryName]
  forM cats $ \(Entity catId cat) -> do
      products <- selectList
          [ProductCategory ==. catId]
          [Asc ProductName]
      return (cat, map entityVal products)

这样，将计算第二行的宽度（即，剩余宽度）并响应地应用。

答案 15 :(得分：0)

查看可用的CSS布局框架。我建议Simpl或稍微复杂的蓝图框架。

如果您使用的是Simpl（只涉及导入一个 simpl.css 文件），您可以这样做：

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

，对于50-50布局，或：

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

，25-75。

就这么简单。

答案 16 :(得分：0)

使用flexbox相当容易。请参见下面的代码段。我添加了一个包装容器来控制流量并设置全局高度。还添加了边框以标识元素。请注意，div现在也可以根据需要扩展到整个高度。 在实际情况下，应将供应商前缀用于flexbox，因为尚不完全支持。

我开发了一个免费工具，可以使用flexbox了解和设计布局。在这里查看： http://algid.com/Flex-Designer 

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

答案 17 :(得分：0)

你可以使用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>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

不要忘记链接页面的header：

中的CSS库 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

以下是官方演示：W3 School Tryit Editor

答案 18 :(得分：0)

我写了一个javascript函数，我从jQuery $（document）.ready（）调用。这将解析父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"));
            }
        });
    });
}

答案 19 :(得分：0)

我不确定这是否是您所期望的答案，但是，为什么不将Tree的宽度设置为'auto'，将'View'的宽度设置为100％？

答案 20 :(得分：-3)

如果两个宽度都是可变长度，为什么不用某些脚本或服务器端计算宽度呢？

<div style="width: <=% getTreeWidth() %>">Tree</div> 

<div style="width: <=% getViewWidth() %>">View</div>
相关问题
最新问题