logo标签列表

CSS：两个字段，左侧宽度灵活，右侧占据剩余空间

css
13
------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------

|<------------------------- 100% width ----------------------->|

我有上面的布局。左边的框应该尽可能小，而右边的框应该占据剩余的空间。通常使用 float: left 就可以实现。

问题是右边的框可能会增长很多，而左边的框基本上保持很小（但大小会变化，因此需要灵活处理）。如果右框增长，我需要它表现出以下行为：

------------- --------------------------------------------------
| some text | | quite a lot of text, actually, really quite a  |
------------- | bunch of it, you could say this is really      |
              | quite a heck of a lot of text                  |
              --------------------------------------------------
如果我使用 float:left，右侧的盒子会在包含大量文本时换行到左侧盒子下方:
-------------
| some text |                                         (not good)
-------------
----------------------------------------------------------------
| quite a lot of text, actually, really quite a bunch of it,   |
| you could say this is really quite a heck of a lot of text   |
----------------------------------------------------------------

如果我为这两个元素都使用表格，当两个元素都只包含很少的文本时，左边的框可能会不必要地变得很宽：

                                                      (not good)
-------------------------------- -------------------------------
| some text                    | | not that much text          |
-------------------------------- -------------------------------

此外，左侧的框不应该换行。但由于它包含一些HTML元素而不仅仅是纯文本，所以在所有浏览器中都似乎不能使用no-wrap。

有什么好的解决方案吗？

编辑

实际上，右侧的框占据剩余宽度并不是非常重要，只要它始终附着在左侧框的右侧即可。

你是否被限制在HTML中将左侧框放在右侧框外？ - Stobor
@Stobor：不，HTML非常灵活。 - deceze
5个回答
26
对于右侧的盒子，请使用overflow: hidden; width: auto;而不是浮动。这样可以占用剩余空间，无论有多少内容都不会下降。继续浮动左侧的盒子。
嘿，我觉得你有点眉目了。我不知道 overflow: hidden 是这样工作的。我需要做一些更多的测试，但这似乎是答案！ :) - deceze
2
我从stubbornella.org的Nicole Sullivan那里学到了这个 - 她在那里有更多的细节：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/非常有用。 - Miriam Suzanne
太棒了，它能正常工作。法国人有许多秘诀。（请原谅我的糟糕模仿。;)) - deceze
0
如Stobor所建议的：尝试将左框放在右框内。
<div id="rightBox">
   <div id="leftBox">This text will expand the left box</div>
   <div style="float:left">
      Content of right box goes here<br>
      Breaking even works...
   </div>
</div>

CSS：

#rightBox {
   width: 100%;
   background: red;
}
#leftBox {
   width: auto;
   float: left;
   background: blue;
}

对我来说可行。

那么基本上把它们都放在一个包装器中并向左浮动？对我没用，如果右边的框包含大量文本（没有换行符！），则会在左边的框下换行。 - deceze
啊，我明白了。嗯...那我得再尝试几个其他的东西了。 - peirix
0

您也可以尝试将包装器的显示设置为表格，将子元素设置为表格单元格。然后，您可以将一个div的宽度和高度设置为固定像素值，将另一个（动态）div的宽度设置为100％。

<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#container{
  border: solid #222 1px;
  width: 400px;
  height: 360px;
  resize: both;
  overflow: auto;
}

#wrap{
  border: solid red 1px;
  width: 100%;
  height: 100%;
  display: table;
  resize: both;
  overflow: auto;
}

video{
  border: solid #222 4px;
  display: table-cell;
  width: 160px;
  height: 160px;
}

#list{
  border: solid #222 4px;
  display: table-cell;
  width: 100%;
  height: 100%;
}
</style>
<div id="container">
  <div id="wrap">
    <video controls></video>
    <br>
    <div id="list"></div>
  </div>
</div>

把那个小家伙扔进去！

附注：不过我不确定如何垂直排列它 :(

编辑!!!

垂直：

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#container{
  border: solid #222 1px;
  width: 400px;
  height: 360px;
  resize: both;
  overflow: auto;
}

#wrap{
  border: solid red 1px;
  width: 100%;
  height: 100%;
  display: table;
  resize: both;
  overflow: auto;
}

video{
  border: solid #222 4px;
  display: table-cell;
  width: 160px;
  height: 160px;
}

#median{
  display: table-row;
  width: 100%;
}

#list{
  border: solid #222 4px;
  display: table-cell;
  width: 100%;
  height: 100%;
}
</style>
<div id="container">
  <div id="wrap">
    <video controls></video>
    <div id="median"></div>
    <div id="list"></div>
  </div>
</div>
0

为左列定义一个固定宽度，以及float:left；在HTML中将其放在主列之后

右列有两个divs；外部的也向左浮动，并具有100％的宽度，内部的左边距与左列相同的宽度。

抱歉，没有固定宽度，左列需要是灵活的。 - deceze
0

如果您正在使用纯 CSS 解决方案，我认为您必须给其中一个列设置宽度约束。它绝对不可能像上面建议的那样是百分比吗？

问题有两个方面。如果您浮动一个列并将另一个列的宽度设置为 100%，由于浮动的列已从文档流中删除，因此另一个列的 100% 宽度是整个视口宽度（它忽略了浮动的 div）。如果您将两者都浮动而不设置第二个 div 的宽度，则该 div 将会（应该）收缩到其最宽的子元素的宽度。 w3c 规范 可能会有所帮助，尽管它不是最容易阅读的。

您可以尝试使用 JavaScript 读取视口宽度，然后设置列宽，否则我认为您会有困难。

我会再试试，但似乎没有JavaScript几乎没有解决方案。现在我正在考虑使用表格，因为它已经让我非常接近了，并通过JS调整左列的宽度。 :( - deceze
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接