如何将元素并排排列，而不考虑容器

How to line elements side by side, regardless of container

本文关键字：不考虑排列元素更新时间：2023-09-26

我有一个容器，里面有一些divs。我想把divs并排排列。如果它们不适合容器，仍然将它们放在一起，但放在容器外部。我试过使用white-space: nowrap。这将它们从父容器中分离出来，但也将从父容器分离出来。以下是nowrap问题的一个示例。

.container{
  border: dashed;
  width: 25%;
  display: inline-block;
  white-space:nowrap;
}
.row {
  border: dotted red;
}
.block {
  display: inline-block;
  border: dotted green;
}

<div class="container">
  <div class='row'>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div> 
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
   
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   </div>
</div>

黑色边框是窗口，红色边框是父div，绿色边框表示数据块。

我只需要转义祖父母div，而父div仍然会环绕内容，即使它转义了祖父母div。

有什么建议吗？

编辑：所有的答案对我来说都不起作用。我仍然不能以我的例子来围绕孩子们。

将display: table或display: inline-block赋给.row:

.container{
    border: dashed;
    width: 25%;
    display: inline-block;
    white-space:nowrap;
}
.row {
    display: table; // inline-block
    border: dotted red;
}
.block {
    display: inline-block;
    border: dotted green;
    margin: 2px;
}

CodePen：http://codepen.io/theblindprophet/pen/rLJzqG

一种破解解决方案，使用outline而不是border，并在窗口上添加填充（或阻止边距折叠（实际窗口会阻止它），并在"父div"上使用margin）。没有border那么灵活，但表现出你想要的行为。

.container{
  border: dashed;
  width: 25%;
  display: inline-block;
  white-space:nowrap;
  padding:3px;
}
.row {
  outline:3px dotted red;
}
.block {
  display: inline-block;
  border: dotted green;
}

<div class="container">
  <div class='row'>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div> 
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
   
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   </div>
</div>

如果您将display: inline-block;添加到.row，它可以按照我的理解工作。

https://jsfiddle.net/2caxuhu6/

这很容易

.container{
  border: dashed;
  width: 25%;
  white-space:nowrap;
}
.row {
  border: dotted red;
    display: inline-block;
}
.block {
  display: inline-block;
  border: dotted green;
}

<div class="container">
  <div class='row'>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
       <div class="block">
         <p>
         Stuff
         </p>
       </div> 
       <div class="block">
         <p>
         Stuff
         </p>
       </div>
   
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   <div class="block">
     <p>
     Stuff
     </p>
   </div>
   </div>
</div>