发表新帖
发表新帖

Expand a div to fill the remaining width

前端 未结
关注
21 1108
一生所求
一生所求 2020-11-21 22:21

I want a two-column div layout, where each one can have variable width e.g.

相关标签:
21条回答
  • 一个人的身影
    2020-11-21 23:06

    The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

    Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

    This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

    Demos:

    • Fixed Left: http://jsfiddle.net/A8zLY/5/
    • Fixed Right: http://jsfiddle.net/A8zLY/2/
    0 讨论(0)
  • 南方客
    2020-11-21 23:06

    This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.

    If both the columns were fixed width, this would be easy.

    If one of the columns was fixed width, this would be slightly harder but entirely doable.

    With both columns variable width, IMHO you need to just use a two-column table.

    0 讨论(0)
  • 花落未央
    2020-11-21 23:07

    Here, this might help...

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

    0 讨论(0)
  • 遇见更好的自我
    2020-11-21 23:08

    Have a look at the available CSS layout frameworks. I would recommend Simpl or, the slightly more complex, Blueprint framework.

    If you are using Simpl (which involves importing just one simpl.css file), you can do this:

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

    , for a 50-50 layout, or :

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

    , for a 25-75 one.

    It's that simple.

    0 讨论(0)
  • 后悔当初
    2020-11-21 23:11

    If both of the widths are variable length why don't you calculate the width with some scripting or server side?

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

    <div style="width: <=% getViewWidth() %>">View</div>
    0 讨论(0)
  • 轻奢々
    2020-11-21 23:12

    This is fairly easy using flexbox. See the snippet below. I've added a wrapper container to control flow and set a global height. Borders have been added as well to identify the elements. Notice that divs now expand to the full height as well, as required. Vendor prefixes should be used for flexbox in a real world scenario since is not yet fully supported.

    I've developed a free tool to understand and design layouts using flexbox. Check it out here: 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>

    0 讨论(0)
 看不清?
提交回复
热议问题