どのように私は、それらの1つがビューポートの端に出血して中央のコンテナに2つのdivを浮かべます

Question

こんにちは私はこれが答えられているが、私は何を探しているように見えることはできません。最大幅とマージンがautoのコンテナを持っていて、2つのdivが互いに隣り合っている（どちらもコンテナの50％を占めています）が、右側のコンテナはコンテナの端から右にブリードしますビューポート？

点線の白い線がコンテナ、黒色がブラウザです。

[ここに例] [1]

編集 - 申し訳ありません私はdivを言及するのを忘れてしまったが、両方に必要な左が、それはまだ同じ高さにする必要が右よりも少ない量を持っているので、もし、同じ高さ右のように、私がそれらをテーブルセルのものにしたのと似ています。

.container { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1260px; 
} 

.table{ 
    display:table; 
    table-layout: fixed; 
    width:100%; 

    .left, .right{ 
     display:table-cell; 
     vertical-align: top; 
     width:50% 
    } 
} 

HTML

<div class="container"> 
    <div class="table"> 
     <div class="left"> 
      content 
     </div> 
     <div class="right"> 
      content 
     </div> 
    </div> 
</div> 

私はこの回答に基づいて、それを調整しようとしているが、それはあなたがこのためにブートストラップ試してみてください

http://jsfiddle.net/gxG4W/2/

Answer 1

をスタックします。 これがあなたを助けてくれることを願っています。 ブラウザのウィンドウを最大化することでこれをチェックしてください。 [OK]を私はかなり多くは、今自分がこれを修正した Bootstrap Column

.container { 
 
    border: solid; 
 
} 
 

 
h4 { margin-bottom: 30px; } 
 

 
.row { 
 
    margin-bottom: 20px; 
 
} 
 
.row .row { 
 
    margin-top: 10px; 
 
    margin-bottom: 0; 
 
} 
 
.left-div 
 
{ 
 
    border: solid red; 
 
} 
 
.right-div 
 
{ 
 
    border: solid green; 
 
}

<div class="container text-center"> 
 
    <div class="row"> 
 
     <h4>Two Columns</h4> 
 
     <div class="col-lg-6 col-md-6 left-div"> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 right-div"> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     </div> 
 
     </div> 
 
      
 
    
 
</div>

Answer 2

、私はその最良の方法はそれを行うことかどうかわからないんだけど、それは通りのdivの同じ高さがありませんテーブルトリックで、私はそれを行うために私たちに私たちが必要となります。しかしここに私の解決策があります。

<div class="container"> 
     <div class="left"> 
      Lorem ipsum dolor sit amet 
     </div> 
     <div class="right"> 
      Lorem ipsum dolor sit amet 
     </div> 
    </div> 

CSS

.container{ 
    max-width:500px; 
    margin:0 auto; 
    background:red; 
    padding:10px 0; 
} 

.container::after{ 
    content:" "; 
    clear:both; 
    display:block; 
    float:none; 
} 

.left{ 
    float:left; 
    width:50%; 
    background:green; 
} 

.right{ 
    background:blue; 
    width:50vw; 
    margin-left:50%; 
} 

https://jsfiddle.net/shbkxcgw/4/