无论容器如何，如何并排排列元素

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我需要逃离祖父母div，而父div仍然会围绕内容，即使它逃脱了祖父母div。

有任何建议吗？

编辑：没有一个答案对我有用。在我的例子中，我仍然无法包围孩子们。

Answer 1

将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

Answer 2

一种hack-y解决方案，使用outline代替border，并在窗口上填充填充（或块边缘折叠（实际窗口将阻止它）并使用margin在父母div＆＃34;）上。不像border那样灵活，但表现出你想要的行为。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您将display: inline-block;添加到.row，则按照我的理解，您可以这样做。

https://jsfiddle.net/2caxuhu6/

Answer 4

这很容易

＆＃13;

＆＃13;

.container{
  border: dashed;
  width: 25%;

  white-space:nowrap;
}
.row {
  border: dotted red;
    display: inline-block;
}
.block {
  display: inline-block;
  border: dotted green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;