3

让我先说我觉得自己像个白痴。我有一个相当简单的场景，我无法弄清楚。

这是我的代码的示例：

<div id="container-wrapper">  
  <div id="container">
    <div class="left">This is LEFT</div>
    <div class="line"></div>
  </div>
</div>

假设#container-wrapper是固定宽度，例如 960px。 #container的宽度设置为 100%。我不知道.left的宽度，因为里面的文本是动态的。它向左浮动。 .line有一个背景图像，它本质上是一条将重复以填充 div 的宽度的线。我想将它浮动到.left旁边， 所以它看起来像这样：

这是左边 ----------------------------------------------- ----------

如果我将.line的宽度设置为 100%，它将尝试填充整个容器宽度，所以问题是如何让它流畅地调整到.left剩余的空间。

希望我很清楚。

谢谢，豪伊

这是我正在使用的真实代码的示例。.line真的是.inside-separator。

<div id="container-wrapper">  
  <div id="container">
     <div class="left">This is LEFT</div>    
     <div class="inside-separator"><span class="inside-separator-left">&nbsp;</span><span class="inside-separator-right">&nbsp;</span></div>
  </div>
</div>

.inside-separator
{
  background: transparent url('../images/inside_separator.png') no-repeat center center;
  margin: 0;
  padding: 0;
  height: 7px;
  width: something?;
}

.inside-separator-left,
.inside-separator-right
{
  display: block;
  position: absolute;
  width: 8px;
  height: 7px;
  background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}

.inside-separator-left
{
  float: left;
  left: 0;
}

.inside-separator-right
{
  float: right;
  right: 0;
}
4

3 回答 3

3

我不确定这是否可以使用浮点数。但是如果你可以使用display:table而不是浮动 .left 那就更容易了。

div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
于 2012-12-20T03:10:03.763 回答
0 
 <div class="left"><div class="line">11111111111111111</div> This is LEFT</div>

将 .line 放入 .left 并浮动 .line right

http://jsfiddle.net/Hk7GR/1/

于 2012-12-20T03:17:12.793 回答
0

感谢您所有的帮助。display:table 成功了。这是一个示例http://jsfiddle.net/idpexec/QKSzC/

    <div class="container-wrapper">
      <div class="container">
        <div class="left">This is LEFT</div>
        <div class="inside-separator-wrapper">
            <div class="inside-separator">
                <span class="inside-separator-left">&nbsp;</span>
                <span class="inside-separator-right">&nbsp;</span>
            </div>
        </div>
     </div>
    </div> 

    <style>
    .container-wrapper
    {
         width: 500px;
         height: 60px;
         border: 1px solid green;
         margin-bottom: 50px;
    }

    .container
    {
        display:table;
        width:100%;
    }

    .left,
    .inside-separator-wrapper
    {
        display:table-cell;
    }

    .left
    {
        border: 1px solid red;
        white-space: nowrap;
        padding: 0 15px;
    }

    .inside-separator-wrapper
    {
      width: 100%;
      position: relative;
    }

    .inside-separator
    {
      background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
      height: 7px;
      position: relative;
      top: 0px;
      left: 0px;
      padding: 0;
      width: 100%;
    }

    .inside-separator-left,
    .inside-separator-right
    {
      display: block;
      position: absolute;
      width: 8px;
      height: 7px;
      background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
    }

    .inside-separator-left
    {
      float: left;
      left: 0;
    }

    .inside-separator-right
    {
      float: right;
      right: 0;
    }
    ​&lt;style>
于 2012-12-20T04:13:24.663 回答