HTML流體柱

讓我先說這個，說我感覺自己像一個白癡。我有一個相當簡單的情況，我無法弄清楚。HTML流體柱

這是我的代碼看起來像一個示例：

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

比方說＃容器包裝是一個固定的寬度，如960像素。 ＃容器將其寬度設置爲100％。我不知道。左側的寬度，因爲裏面的文字是動態的。它向左漂移。 .line有一個背景圖像，它基本上是一條線，它將重複填充div的寬度。我想下一個漂浮它。左，所以它看起來是這樣的：

這留給----------------------- ----------------------------------

如果我設置的寬度爲.line到100％，它會試圖填充整個容器的寬度，所以問題是如何讓它流暢地調整到從.left剩下的空間。

希望我很清楚。

感謝，豪伊

這裏是我使用的實際代碼的樣本。 .line確實是。內側分隔符。

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

來源

2012-12-20 Ward

我不確定這是可能的使用浮動。但如果你確定使用display:table而不是浮動。然後它更容易。

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

來源

2012-12-20 03:10:03 mikel

感謝您的反饋，但我無法完成工作。看起來.left的寬度不僅僅是文本內容的寬度，它是#container的寬度。 – Ward

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

把.line區段的。左內浮動.line區段爲所有的幫助權

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

來源

2012-12-20 03:17:12 deach

感謝rec，但.line div實際上是持有一個必須填滿div的背景圖像，因此.line div必須與.left文本內容之後的其餘區域一樣寬。 – Ward

Awww那變得混亂。所以.left div不能有背景嗎？ – deach

.line可以是跨度（內聯）嗎？ – deach

感謝。顯示：表做了訣竅。下面是一個示例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>

來源

2012-12-20 04:13:24 Ward

回答

相關問題