Question

我想将多个div放在同一行中，但是一个总是在另一个下面。我该怎么办？

查看：https://jsfiddle.net/Alana2597/4pnakz8a/

＆＃13;

.content {
  width: 240px;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 100px;
  height: 100px;
}

#div1 {
  height: 300px;
  width: 100px;
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}

＆＃13;

<div class="content">
  <div id="div1">div1</div>
  <div id="div1">div2</div>
  <div id="div1">div3</div>
  <div id="div1">div4</div>
</div>

＆＃13;

Answer 1

尝试使用using gcc ; using python : 3.6 : "C:/Program Files/Python36" : "C:/Program Files/Python36/include" : "C:/Program Files/Python36/libs" ; 请检查 THIS 示例

注意：请不要为多个元素使用相同的ID名称

示例代码：

display:flex;

Answer 2

首先，您需要将white-space:nowrap应用于父级。

这会通常解决问题但是孩子的float会覆盖此问题。

所以你可以将这些div设置为display:inline-block

＆＃13;

.content {
  width: 240px;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 100px;
  height: 100px;
  white-space: nowrap;
  font-size:0; /* remove gap between divs */
}

.content div {
  height: 300px;
  width: 100px;
  border: solid 1px #000000;
  background-color: #0066CC;
  display: inline-block;
  font-size:1rem; /* reset font size */
}

＆＃13;

<div class="content">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
</div>

＆＃13;

或者也许使用Flexbox

＆＃13;

.content {
  width: 240px;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 100px;
  height: 100px;
  white-space: nowrap;
  display: flex;
}

.content div {
  height: 300px;
  flex: 0 0 100px;
  border: solid 1px #000000;
  background-color: #0066CC;
}

＆＃13;

<div class="content">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
</div>

＆＃13;

Answer 3

首先，您需要将ID切换为类，因为ID是唯一的，因此您的标记无效。

其次，您已将width: 240px指定为.content，因此其子项没有足够的空间和包装。将width: 240px切换为width: 100%即可使用

Answer 4

将您的div包装在另一个容器中。给这个容器一个width值 - 非常宽......

＆＃13;

.content {
  width: 240px;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 100px;
  height: 100px;
}

.inner-content {
  width: 1100000px;
}

#div1 {
  height: 300px;
  width: 100px;
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}

＆＃13;

<div class="content">
  <div class="inner-content">
    <div id="div1">div1</div>
    <div id="div1">div2</div>
    <div id="div1">div3</div>
    <div id="div1">div4</div>
  </div>
</div>

＆＃13;

多行Div在同一行中没有在另一行中

4 个答案: