Css 停止包装包含的div？

我目前在容器div中设置了div，如下所示：

<div id="container">  
    <div id="element"> Element 1 content </div>  
    <div id="element"> Element 2 content </div>  
    <div id="element"> Element 3 content </div>  
    <div id="element"> Element 4 content </div>  
</div>

下面是一段代码：

因此，我希望每个元素彼此相邻排列（所有4个在一行中），但只有前两个可见（容器是200px，每个元素是100px，因此一次只有2个可见），而用户可以滚动（水平）到第三和第四个元素（因为它们不太重要）

但是，在这种设置下，元素3和4将换行到下一行

使用

空白：nowrap

更新容器类不起任何作用。这只会影响文本，而不会影响div

有什么想法吗？提前谢谢

有两种方法：

1） Clearfix-添加到容器中

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

2） 清除DIV-放置在最后一个浮动元素之后

<div class="clear"></div>

.clear {
   clear:both;
   font-size:0;
}

---

div是块级元素，这意味着它们创建了一条新线。如果希望块级元素相邻，则需要使用

float:left

或

float:right

浮动它们。记住，当你想让东西开始进入新行时，用

clear:both

清除它们

为了防止它们被包装，可以使用

溢出：

参数

我还建议使用CSS直接子选择器，而不是指定同一个类

元素

一遍又一遍

div.container>div{color:red；}

您只需设置高度：

.container{宽度：200px；高度：20px；溢出-x:auto；溢出-y:hidden；}
.element{width:100px；height:20px；float:left；}
要素1内容
要素2内容
要素3内容
要素4内容

使用总宽度为4个元素的包装器div，并将容器设置为隐藏溢出，html示例

<div class="container">
  <div class="wrapper">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
  </div>
</div>

---

首先，要让这些字段使用这些CSS样式，它们需要分别是#容器和#元素。或者将其更改为使用包装div来处理滚动

标记：

<div id="container">
<div class="wrappingcontainer">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
</div>

    #container { width:200px; overflow-x:auto; overflow-y:hidden; }
   .element { width:100px; float:left; }
   .wrappingcontainer{ width: 400px; }

---

您的小提琴使用.element而不是#element，因此无法工作。你能安排一下吗？韩的答案对我来说是最好的。小提琴在这里。没有其他人得到你想要的水平滚动。

.container { width:200px; height:20px; overflow-x:auto; overflow-y:hidden; }
.element { width:100px; height:20px;  float:left; }


<div class="container">
<div class="element"> Element 1 content </div>
<div class="element"> Element 2 content </div>
<div class="element"> Element 3 content </div>
<div class="element"> Element 4 content </div>
</div>

<div class="container">
  <div class="wrapper">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
  </div>
</div>

.container { width:200px; overflow-x:auto; overflow-y:hidden; }
.wrapper { width: 400px; }
.element { width:100px; float:left; }

<div id="container">
<div class="wrappingcontainer">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
</div>

    #container { width:200px; overflow-x:auto; overflow-y:hidden; }
   .element { width:100px; float:left; }
   .wrappingcontainer{ width: 400px; }