并排显示div的问题

Question

I am trying to create a scrollable div which should show 3 div's side by side. Below is my html code, Issue with below code is it is not showing 3 div's side by side instead it is displaying one after other.

   <div id="myDIV2" class="mygrid-wrapper-div">
        <h1>This is scrollable div </h1>
        <div class="row row-list">
            <div class="col-xs-4">
                    <div>
                   Test1
                    </div></div>
            <div class="col-xs-4">Test2</div>
            <div class="col-xs-4">
                <div>
                  Test3
                </div></div> 
        </div></div>

css code:

 <style>
        .mygrid-wrapper-div {
            /*border: solid red 5px;*/
            overflow: scroll;
            height: 40%;
        }
    </style>

Answer 1

A div is a "block-level" element. Block-level elements are 100% of the width of their parent element and displayed on their own line by default.

There are several ways to override this layout:

Set float for the element, which reduces it's width to the width of the content and allows other elements to be on the same line with the floated element.

Set the width to an amount that leaves left over space for another element to fit on the same line and set the element to be display:inline or display:inline-block .

Take the element out of the normal document flow by setting its position property to absolute , relative or fixed .

Make the elements flexitems within a flex container.

 .mygrid-wrapper-div { overflow: scroll; height: 40%; } .col-xs-4 { border: 1px solid red; float:left; } 

 <div id="myDIV2" class="mygrid-wrapper-div"> <h1>This is scrollable div </h1> <div class="row row-list"> <div class="col-xs-4"> <div ng-controller="myController"> <div ng-repeat="c in chart"> <div google-chart chart="c">test</div> </div></div></div> <div class="col-xs-4">22222222 </div> <div class="col-xs-4"> <div ng-controller="myController"> <div ng-repeat="c1 in chart"> <div google-chart chart="c1">test</div> </div></div></div> </div></div> 

Answer 2

Add the css style:

float:left;

to your divs.

Answer 3

Your plnkr.co example was not loading bootstrap , which is why you were not seeing your divs aligned as expected. Made the following changes to make it work:

Removed:

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

Added:

<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

Check https://plnkr.co/edit/r6a7lJpNNG2UI1qDbcb6?p=preview