Question

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

这是我的代码的样本：

<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 旁边，所以它看起来像这样：

这是LEFT -------------------------------------------- -------------

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

希望我很清楚。

谢谢，豪伊

这是我正在使用的真实代码的示例。 .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;
}

Answer 1

我不确定使用花车是否可行。但是，如果您使用display:table而不是浮动.left，那么它就更容易了。

div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }

Answer 2

 <div class="left"><div class="line">11111111111111111</div> This is LEFT</div>

将.line放在.left和float .line右边

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

Answer 3

感谢您的所有帮助。显示：表格诀窍。这是一个示例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;
    }
    <style>

HTML流体色谱柱

3 个答案: