2

私はhtmlとcssを初めて使用するので、ここで我慢してください。ブートストラップに2列の行があります。左の列のdivを右の列のdivに垂直に揃えたい。これどうやってするの？

具体的には、右側に特定の要素を説明するテキストが左側にあるdivが必要です。たとえば、本を読んでいると想像してみてください。ただし、ページの左マージンには、それらの単語の隣に配置された単語を定義するコールアウトがあります。

右の列のコンテンツは動的です。特定のdivが存在することはわかっていますが、それらが垂直方向にどこにあるかは正確にはわかりません。

これがjsfiddleです：http：//jsfiddle.net/dylanlingelbach/C73ap/。それは私がやろうとしていることのかなり最小限の再現でなければなりません。私の実際の場合、休憩はサイズがわからないhtmlコンテンツです。

ブートストラップ2を使用しています。

可能であれば、JavaScriptなしでこれを実行したいと思います。右の列のdivの位置を見つけて、左の列のdivの絶対位置を動的に調整することで、動的に実行できると確信していますが、純粋なCSSソリューションの方がエレガントだと思います。

HTML：

<div class="modal">
  <div class="modal-header">
    <button type="button" class="close cancel" aria-hidden="true">×</button>
    <h2 id="invite-modal-label">Some text</h2>
  </div>
  <div class="modal-body">
    <div class="row-fluid">
      <div class="span3">
        <div class="one">
          Align with #anchor1
        </div>
        <div class="two">
          Align with #anchor2
        </div> 
      </div>
      <div class="span9 padded">
          Content 
          <br/><br/><br/><br/><br/><br/>
          <div id="anchor1">
              #anchor1
          </div>
          <br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/>
          <div id="anchor1">
              #anchor2
          </div>
          <br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/>
          Text at the end
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-success confirm">Send</button>
    <button class="btn btn-danger cancel">Cancel</button>
  </div>
</div>

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.modal {
  width: 60%; 
  left: 5%; 
  margin: auto auto auto auto;
}

.one {
  border:1px solid black;
}

.two {
  border:1px solid black;
}

更新： HTMLを再フォーマットしたくありません。右の列のコンテンツは個別にレンダリングされます。基本的に、このデータはいくつかの場所に表示されますが、すべてが左側の列になるわけではありません。右側の列のコンテンツをマークアップの残りの部分から分離してレンダリングするコードを保持したいと思います。

4

2 に答える 2

2

垂直方向に揃えたい項目ごとに、独自の行に配置する必要があります。

<div class="row-fluid">
    <div class="span6"></div>  
    <div class="span6">content content content content content content content content content content content content content content content content content content</div>  
</div>
<div class="row-fluid">
    <div class="span6">Align with #anchor1</div>  
    <div class="span6">#anchor1</div>  
</div>

これが正しいjsfiddleです

于 2013-03-19T18:52:41.363 に答える
0

おそらく、達成しようとしているフォーマットの多くをサポートするようにHTMLを作り直す必要があります。

各アンカーラベルとそのコンテンツを独自の行に分割することをお勧めします。

私がしたことは.fluid-row、次のように、各セクションを独自のセクションに分割することでした。

<div class="modal">
    <div class="modal-header">
        <button type="button" class="close cancel" aria-hidden="true">×</button>
        <h2 id="invite-modal-label">Some text</h2>
    </div>
    <div class="modal-body">
        <div class="row-fluid">
            <div class="span3">
                <div class="one">Align with #anchor1</div>
            </div>
            <div class="span9 padded"> 
                Content for anchor 1
                <br /><br /><br /><br /><br /><br />
            </div>
        </div><!-- end .row-fluid -->
        <div class="row-fluid">
            <div class="span3">
                <div class="two">Align with #anchor2</div>
            </div>
            <div class="span9 padded"> 
                Content for anchor 2
                <br /><br /><br /><br /><br /><br />
            </div>
        </div><!-- end .row-fluid -->        
    </div>
    <div class="modal-footer">
        <button class="btn btn-success confirm">Send</button>
        <button class="btn btn-danger cancel">Cancel</button>
    </div>
</div>

この結果はここで確認できます：http：//jsfiddle.net/C73ap/38/

于 2013-03-19T18:53:35.230 に答える