Question

我正在尝试创建一个可滚动的div，它应该并排显示3个div。下面是我的html代码，下面代码的问题是它没有显示3个div并排显示，而是显示一个接一个。

   <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代码：

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

Answer 1

div是“块级”元素。块级元素是其父元素宽度的100％，默认情况下显示在它们自己的行上。

有几种方法可以覆盖此布局：

为元素设置float，将宽度减小到内容的宽度，并允许其他元素与浮动元素在同一条线上。

将宽度设置为留在空间上的量，以使另一个元素适合同一行，并将元素设置为display:inline或display:inline-block。

将该position属性设置为absolute，relative或fixed，将该元素从正常文档流中取出。

在flex容器中创建元素flexitems。

.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

添加css样式：

float:left;

到您的div。

Answer 3

您的<?php $string = "12345,6789,1011"; $result = explode(",",$string); $ConcatString = ''; foreach($result as $Values) { $ConcatString .= $Values[0]." "; } echo $ConcatString; ?>示例未加载plnkr.co，这就是为什么您没有按预期看到您的div对齐的原因。进行了以下更改以使其正常工作：

移除：

bootstrap

添加了：

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

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

问题并排显示div

3 个答案: