Html 问题显示div'；s肩并肩

我正在尝试创建一个可滚动的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>

这是可滚动的div
测试1
测试2
测试3

css代码：

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

.mygrid包装器div{
/*边框：纯红5px*/
溢出：滚动；
身高：40%；
}

添加css样式：

float:left;

到您的div。

A

div

是一个“块级”元素。块级元素是其父元素宽度的100%，默认情况下显示在其自己的行上

有几种方法可以替代此布局：

为元素设置

float

，将其宽度减小到内容的宽度，并允许其他元素与浮动元素位于同一行

将宽度设置为允许另一个元素在同一行上容纳的剩余空间，并将元素设置为

display:inline

或

display:inline block

通过将元素的

位置

属性设置为

绝对

、

相对

或

固定

，将元素从正常文档流中移除

使元素在flex容器中成为flexitems

.mygrid包装器div{
溢出：滚动；
身高：40%；
}
.col-xs-4{
边框：1px纯红；
浮动：左；
}

这是可滚动的div
测试
22222222
测试

您的

plnkr.co

示例未加载

引导

，这就是您没有看到div按预期对齐的原因。进行了以下更改以使其正常工作：

删除：

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

增加：

<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" />

---

检查

我已包括浮动：按建议左，但不起作用。请查找更新的演示@Luke BarrierI建议使用flexbox或网格布局。我已经按照您的建议应用了，但是div2之后没有显示div3，而是显示为向下。请找到更新的演示，在那里我们可以看到div3到div1，有什么输入吗@user3692021您确定所有3个div元素组合的宽度没有超过容器的宽度吗？即使使用float，如果内容不能放在当前行上，内容仍然会流到下一行。我们可以跳过宽度，让所有3div一个接一个地适合吗？您必须将它们放在一个设置为大于100%宽度的容器中，这将导致用户必须向右滚动才能看到多余的内容。这通常不是一个好的UI决策。