Css 如何防止内联块 div 换行

发布于01月21日

jsFiddle demo个

我希望div人:

包装他们的内容.
停留在它们最初关联的行中，基本上没有包装.

基本上，当桌子不能停留在屏幕上时，它们是一个接一个地堆放在一起.我宁愿他们隐藏在屏幕之外.

我已经try 将overflow: hidden;添加到主布局样式中.我不想 for each div确定宽度.它需要适应内容.

.layout {
  -moz-border-radius: 15px;
  border-radius: 15px;
  vertical-align: top;
  display: inline-block;
}

.layoutbacking {
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding: 5px;
  margin: 5px;
  background: #CCCCCC;
}

<div class="layout" style="background: #222222; width: 100%">
  <div>
    <div class="layout layoutbacking">
      <table>
        <tr>
          <th>header 1</th>
          <th>header 2</th>
          <th>header 3</th>
          <th>header 4</th>
        </tr>
        <tr>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
        <tr>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
        <tr>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
      </table>
    </div>
    <div class="layout">
      <div class="layout layoutbacking">
        <table>
          <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
            <th>header 4</th>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
          </tr>
        </table>
      </div>
      <br />
      <div class="layout layoutbacking">
        <table>
          <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
            <th>header 4</th>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div>
    <div class="layout layoutbacking">
      <table>
        <tr>
          <th>header 1</th>
          <th>header 2</th>
          <th>header 3</th>
          <th>header 4</th>
        </tr>
        <tr>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
      </table>
    </div>
    <div class="layout layoutbacking">
      <table>
        <tr>
          <th>header 1</th>
          <th>header 2</th>
          <th>header 3</th>
          <th>header 4</th>
        </tr>
        <tr>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
      </table>
    </div>

.layout { white-space : nowrap; /* this does the trick */ overflow : hidden; /* this prevents the grey divs from overflowing */ vertical-align : top; border-radius : 15px; display : inline-block; } .layoutbacking { border-radius : 15px; background : #CCCCCC; padding : 5px; margin : 5px; }

<div class="layout" style="background: #222222; width: 100%"> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <div class="layout"> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <br /> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> </div> </div> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div>

Css 如何防止内联块 div 换行

推荐答案

Css相关问答推荐

如何在CSS calc()中使用反向百分比/无单位计算？

Angular Material：如何同时使用2个徽章

如何在CSS中实现边框的局部透明？

响应的Megamenu位置css

如何解决 Spotify 嵌入代码中的白色背景错误？

如何有条件地设置元素的字体大小，只有在未明确设置父字体大小(即字体大小为继承)的情况下？

在变量中存储匹配 Select 器的子元素的计数

Vue.js 变量中的动态类变量

如何在 konvajs 中居中放置项目？

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

如何在 TypeScript 文件中导入 CSS 模块？

CSS 在具有多个背景图像的元素上过滤一个背景图像

停止 div 推动另一个 div 做出react

当我在几个月之间更改时，有什么方法可以在react-dates-range上添加淡入淡出或幻灯片效果？

Rails 7引擎如何使未编译的样式表可用于托管应用程序？

CSS3 的：root 伪类和 html 有什么区别？

在 CSS 或 JavaScript 中反转图像的 colored颜色

如何通过 JavaScript 重新触发 WebKit CSS 动画？

使用@font-face 使用多种自定义字体？

内联块列表项中不需要的边距