View我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度。目前我的'view'div被调整为它包含的内容。如果两个div占据整个高度也会很好不重复免责声明:当float:left设置时,将div扩展到m" />

展开div以获取剩余宽度

html css css3 multiple-columns

269157 观看

21回复

55462 作者的声誉

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

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

我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度。目前我的'view'div被调整为它包含的内容。如果两个div占据整个高度也会很好

不重复免责声明:

当float:left设置时,将div扩展到max width, 因为左边的一个具有固定的宽度。

帮助div - 使div适合剩余的宽度, 因为我需要两个向左对齐的列

作者: Anurag Uniyal 的来源 发布者: 2009 年 8 月 11 日

回应 (21)


0

0 作者的声誉

我不确定这是否是您期望的答案,但是,为什么不将Tree的宽度设置为'auto',将'View'的宽度设置为100%?

作者: anonymous 发布者: 11.08.2009 12:49

26

506316 作者的声誉

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

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

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

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

作者: cletus 发布者: 11.08.2009 12:49

-3

2939 作者的声誉

如果两个宽度都是可变长度,为什么不用一些脚本或服务器端计算宽度?

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

<div style="width: <=% getViewWidth() %>">View</div>
作者: amischiefr 发布者: 11.08.2009 12:52

0

0 作者的声誉

看看可用的CSS布局框架。我会推荐Simpl或稍微复杂的Blueprint框架。

如果您使用的是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。

就这么简单。

作者: vikas 发布者: 11.08.2009 01:11

15

656 作者的声誉

在这里,这可能有帮助......

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

作者: a6hi5h3k 发布者: 11.08.2009 01:16

960

15482 作者的声誉

决定

这个问题的解决其实很容易,但不是在所有明显。您必须触发称为“块格式化上下文”(BFC)的东西,它以特定方式与浮点交互。

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

这应该适用于所有当前浏览器,但您可能必须在IE6和7中触发hasLayout。我不记得了。

演示:

作者: Xanthir 发布者: 19.11.2009 11:16

1

11 作者的声誉

感谢Simpl.css的插件!

记得ColumnWrapper像这样包装所有列。

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

我即将发布Simpl.css的1.0版本,以帮助传播这个词!

作者: Shaggy 发布者: 13.12.2009 01:02

5

83 作者的声誉

我不明白为什么人们愿意如此努力地为简单的柱状布局找到纯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>

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

作者: PatM 发布者: 09.12.2010 06:30

3

31 作者的声誉

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

作者: A.Pramod Kumar 发布者: 19.01.2011 09:25

1

38 作者的声誉

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

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

作者: johnmanoahs 发布者: 01.06.2011 09:17

21

219 作者的声誉

检查此解决方案

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

作者: angel.dimitrov 发布者: 13.01.2014 04:22

1

4839 作者的声誉

实现略有不同,

content panel如果extra panel不存在,两个div面板(内容+额外)并排展开。

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

作者: Rao 发布者: 06.02.2014 11:58

71

27738 作者的声誉

我刚刚发现了弹性盒子的魔力(显示: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盒子给了我我希望css拥有15年的控制权。它终于来了!更多信息:https//css-tricks.com/snippets/css/a-guide-to-flexbox/

作者: B T 发布者: 28.05.2015 02:38

1

1351 作者的声誉

如果另一列的宽度是固定的,那么如何使用适用于所有常见浏览器calcCSS函数:

width: calc(100% - 20px) /* 20px being the first column's width */

这样,将计算第二行的宽度(即,剩余宽度)并响应地应用。

作者: anit 发布者: 30.10.2015 09:11

12

192 作者的声誉

用途calc

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

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

作者: joel Moses 发布者: 09.03.2016 06:53

11

5692 作者的声誉

Flexbox解决方案

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

注意:如果您的支持的浏览器需要,请添加flex供应商前缀。

作者: Reggie Pinkham 发布者: 06.11.2016 08:12

0

986 作者的声誉

我写了一个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"));
            }
        });
    });
}
作者: bcr666 发布者: 11.03.2017 04:43

0

11 作者的声誉

您可以使用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>

不要忘记链接页面中的CSS库header

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

这是官方演示:W3 School Tryit Editor

作者: manar 发布者: 07.08.2017 01:40

3

30923 作者的声誉

您可以尝试CSS网格布局

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

dt {
  grid-column: 1;
}

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

作者: canon 发布者: 15.08.2017 04:00

0

164 作者的声誉

使用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>

作者: Mario Vázquez 发布者: 12.08.2018 08:06

1

894 作者的声誉

flex-grow - 这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间量。

如果所有项目的flex-grow都设置为1,则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2,则剩余空间占用的空间是其他孩子的两倍(或者至少会尝试)。在这里查看更多

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

作者: Stanislav Ostapenko 发布者: 08.11.2018 02:23
32x32