停止浮动div包装 | 停止浮动div包装

本文介绍了停止浮动div包装的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想有一行div（单元格），如果浏览器太窄，不适合他们。

I want to have a row of divs (cells) that don't wrap if the browser is too narrow to fit them.

我已经搜索Stack，并且找不到一个工作答案，我认为应该是一个简单的css问题。

I've searched Stack, and couldn't find a working answer to what I think should be a simple css question.

单元格有指定的宽度。但是我不想指定行的宽度，宽度应该自动为其子单元格的宽度。

The cells have specified width. However I don't want to specify the width of the row, the width should automatically be the width of its child cells.

如果视口太窄，无法容纳行，那么div应该用滚动条溢出。

If the viewport is too narrow to accomodate the rows, then the div should overflow with scrollbars.

提供你的答案作为工作代码片段，因为我已经尝试了许多解决方案，我在其他地方看到（如指定宽度：100％，他们似乎不工作）。

Please provide your answer as working code snippet, as I've tried a lot of the solutions I've seen elsewhere (like specify width: 100% and they don't seem to work).

我正在寻找只有HTML / CSS的解决方案，没有JavaScript。

I'm looking for a HTML/CSS only solution, no JavaScript.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}

<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

现在我实际上是把行的宽度编码为一个非常大的数字。

At the moment I'm actually hard coding the width of the row to a really big number.

推荐答案

p> CSS属性 display：inline-block 旨在解决此需求。您可以在这里阅读一下：

The CSS property display: inline-block was designed to address this need. You can read a bit about it here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

下面是一个使用示例。关键要素是 row 元素具有 white-space：nowrap 和 / code>元素具有 display：inline-block 。这个例子应该在大多数主流浏览器上工作;此处提供了兼容性表格： http://caniuse.com/#feat=inline-block

Below is an example of its use. The key elements are that the row element has white-space: nowrap and the cell elements have display: inline-block. This example should work on most major browsers; a compatibility table is available here: http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>

                        这篇关于停止浮动div包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！