Как выровнять эти 3 элемента так, как я хочу их с помощью классов Bootstrap?

У меня есть макет, как это:Как выровнять эти 3 элемента так, как я хочу их с помощью классов Bootstrap?

3 square layout

То, что я хочу, чтобы это произошло, я хочу квадрат/прямоугольник справа, чтобы иметь гибкость, чтобы продлить как можно больше высоты, насколько это возможно, но я хочу квадрат внизу, чтобы всегда быть заподлицо под 1-м квадратом, а не, по-видимому, во 2-й строке, созданной в конце 2-го квадрата.

Я попытался воссоздать это на JSFiddle here, но он не вышел точно так, как я хочу. В любом случае, надеюсь, они должны полностью объяснить то, что я пытаюсь достичь.

Note that the solution must be responsive on mobile devices too.

источник

2014-09-26 marcamillion

попробовать это

html { 
 
\t overflow-y: scroll; 
 
} 
 

 
html, body { 
 
\t height: 100%; 
 
} 
 

 
body { 
 
\t font-family: 'Source Sans Pro', sans-serif; 
 
    background: #F2F2F2; 
 
    font-size: 1.3em; 
 
} 
 

 
.post, .comments { 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 1px 1px #aaa; 
 
    padding: 3em; 
 
    margin: 2em auto; 
 
/* \t margin-top: 1em;*/ 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 

 
<body> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-6"> 
 
       <div class="post">box 1</div> 
 
       <div class="post">box 2</div> 
 
      </div> 
 
      <div class="post col-xs-6"> 
 
       <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body>

Надеется, что это помогает ..

Благодаря

источник

2014-09-26 02:44:57 jrran90

Могут ли вы сказать мне, что вы изменили, пожалуйста. Благодаря! – marcamillion

Nevermind ... понял это. – marcamillion

Как выровнять эти 3 элемента так, как я хочу их с помощью классов Bootstrap?

ответ

Смежные вопросы