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

フロートを使用してこれが可能かどうかはわかりません。しかし、フローティング .left の代わりに使用しても問題ない場合は、display:table簡単です。

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 に答える