Question

我很遗憾这个可怕的头衔。

基本上，我有一个div，其中包含div和position: relative;两个float: left;。第一个div设置为200px（凭借其内容），因为它包含的所有内容并不意味着在宽度方面增长。

然而，第二个div我只希望增长到包含div的一侧。包含div没有设置宽度，因为我的屏幕垂直，我知道大多数人都是水平的。我在多台计算机上测试它，所以我知道它在两个版本中的样子。

然而，回到这一点，在第二个div中，如果我输入的词组长于包含div的其余部分，则第二个div会降到第一个div。我不希望第二个div有一个设定的宽度，那么有没有办法设置最大宽度？如果是这样，有没有办法将其设置为包含div的内容？我真的很想不必拉屏幕分辨率，什么不是，所以希望还有另一种方式。

感谢您的帮助。

Cut down code and CSS on jsFiddle.net

Answer 1

overflow is the magic word.

你可以使用它来摆脱那个丑陋的清除div，并让第二个div占用浮动旁边的任何空间。

此外，CSS中的.content div:last-child规则适用于空清算div而不是第二列，因此实际上并没有做任何事情。

这是它的样子（以及updated fiddle）：

<!doctype html>
<style>
.content {
  margin: 10px;
  padding: 0;
  border: 1px solid black;
  overflow: hidden; /* replaces <div class="clear"/> */
}

.columns {
  position: relative;
  float: left;
  padding-right: 20px;
  margin-bottom: 10px;
}

.c2 {
  float: none; /* Don't float this column... */
  overflow: hidden; /* ... Create a new block formatting context instead */
  padding-right: 10px;
  word-wrap: break-word;
}
</style>

<div class="content">
    <div class="columns">
        <img src="#" height="200px" width="200px" />
    </div>
    <div class="columns c2">
        TestingTestingTestingTesting
    </div>
</div>

Answer 2

我不确定你是否需要第二个div要浮动但这里有一个例子似乎可以做你想要的第二个div删除了浮点但是添加了200px的余量它

http://jsfiddle.net/chrisvenus/ZdFwD/1/

我还将图像换成固定宽度的DIV，因为在我的浏览器中，刚刚删除了损坏的图像。

如果右边的内容变得太大而且牢不可破，那么溢出将确保为该div创建滚动条而不是增加div大小然后将其删除或其他不期望的行为。

这可能不适合您的需求，但如果不是，那应该是一个好的开始。：）

Answer 3

问题有点模糊，但我认为max-width就是您所需要的 - 这是一个示例HTML：

<html>
  <head>
    <style type="text/css">
      #wrap {
        position: relative;
      }

      .inner {
        position: relative;
        display: inline-block;
        float: left;
        max-width: 300px;
      }

      #one {
        border: 1px solid red;
        width: 200px;
      }

      #two {
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div id="one" class="inner">Insert long text...</div>
      <div id="two" class="inner">Insert more long text...</div>
    </div>
  </body>
</html>

我希望我能正确理解你的意思。

使div浮动，但如果文本太长则不会“掉落”

3 个答案: