并排安排div

Question

我希望有以下div的布局

我怎样才能做到这一点？我试过下面的代码

<div class="container">
<div class="row">
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Elgen i baksetet">Test block1</a></h3>
                <div class="text"> <em><a href="#">AAAA</a></em>    
                    <p>Test paragraph 1</p>
                </div>
            </div>
        </div>
    </div>
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasing – Et trekantforhold">Test block 2</a></h3>
                <div class="text"> <em><a href="#">BBBB</a></em>    
                    <p>New paragraph</p>
                </div>
            </div>
        </div>
    </div>
    <div class="  col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasingforløpet">New title</a></h3>
                <div class="text"> <em><a href="http://minleasing.no/category/leasing/">Title block 3</a></em>  
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Elgen i baksetet">Title3</a></h3>
                <div class="text"> <em><a href="#">Title block 4</a></em>

                    <p>Paragrpah start</p>
                </div>
            </div>
        </div>
    </div>
    <div class=" col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasing – Et trekantforhold">FFFFFFFFFFF</a></h3>
                <div class="text"> <em><a href="#">GGGGGGGGG</a></em>

                    <p>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</p>
                </div>
            </div>
        </div>
    </div>
    <div class="  col-md-4 " style="">
        <div class="relative">
            <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            <div class="tip">
                 <h3><a href="#" title="Leasingforløpet">Gdddfdf</a></h3>
                <div class="text"> <em><a href="http://minleasing.no/category/leasing/">aaagr</a></em>

                    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="sidediv" class="row" style="float:left">
     This is my side DIV
</div>        

但它倒下而不是侧面。我已经定义了我想要的div sidediv。请记住它应该是响应因此想要使用bootstrap。

这里是Fiddle

Answer 1

您应该将其全部换成一个row并与col-md-

并排排列

喜欢这个

<div class="container">
    <div class="row">
        <div class=" col-md-8 " >
         -YOUR SMALL BLOCK ROWS
        </div>
        <div class="col-md-4">This is my side DIV</div>
    </div>
</div>

以下是fiddle

的示例

注意：仅在大尺寸屏幕上并排排列，因为使用了col-md。如果您希望在小屏幕上并排排列，请相应地使用col-sm或col-xs。

UPD1：

在评论中参考我们的对话框更新的css部分

CSS

.tip {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    position: relative;
    z-index: 1;
    height:150px;
}
.tip .text p
{
    overflow:hidden;
    max-height:60px;

}

更新了fiddle

Answer 2

您提供的图片会在以下小提琴中复制。我假设你没有提供盒子的大小，较小的盒子可以包含在xs-2包装器中，较大的盒子可以包含xs-4包装器。但是，您可以稍后根据您的要求对其进行更改。希望这会有所帮助：）

小提琴链接 -     
https://jsfiddle.net/pk1pr96n/106/

HTML的代码基本上是

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-4">
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
         <div class="col-xs-6">
             <img src="http://www.myitchydog.co.uk/user/small-dog-playing.jpg" width="100%">
         </div>
     </div>
   <div class="col-xs-4">
        <img src="http://payload47.cargocollective.com/1/2/66131/3250877/unicornmirror9x12etsy_860.jpg" width="100%">
   </div>
 </div>