Question

我很抱歉，如果这是我的代码问题调试或已经回答，我找不到它，我看到很多类似的东西，我无法工作。

我想创建一个类似的页面：

A  B  C  D

-----

页脚

这样当我收缩浏览器窗口时，它不会产生

A B
C D

----

页脚

A，B，C都在div中，D是一个表，因为我无法使用我放在那里的共享代码来控制宽度。

根据我的理解，如果我这样做：

#container {
  margin-right: auto;
  width: 900px;
  overflow: auto;
}

.A {
  float: left;
  width: 150px;
}

.B {
  float: left;
  width: 355px;
}

.C {
  float: left;
  width: 150px;
}

table.D {
  float: left;
}

hr {
  clear: left
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="simple.css" />
</head>

<body>
  <article>
    <h3> Commentary</h3>
    <div id="container">
      <div class="A">
        <img src="images/A.JPG" />
      </div>
      <div class="B">
        comments in B
      </div>
      <div class="C">
        <img src="images/C.JPG" />
      </div>
      <table class="D" width="150">
        <tr>
          <td> share </td>
        </tr>
      </table>
    </div>
  </article>
  <hr> closing statements.
  <footer> footer stuff.
  </footer>
</body>

</html>

它会起作用。

我看到的一个线程建议没有浮动，但如果我去修复，那么元素似乎留在窗口中，无论我向下滚动多远。当浏览器缩小时，我想要显示A B C D行的滚动条。

有时候，我会把事情简化为一个这样的简单示例，并且它很有效，而且从float: left到float:left的空间中取出空间，或删除'p'标记我必须将container与hr分开，但是当我更改原始代码时，我仍然遇到问题。

Answer 1

您可以结合使用display: inline-block和white-space: nowrap来实现这一目标。

HTML：

<section id="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div>
        <table></table>
    </div>
</section>

CSS：

#wrapper {
    white-space: nowrap;
    /* Optional overflow-x:hidden */
}
#wrapper div {
    display: inline-block;
    height: 200px;
    width: 200px;
    background: #BFFF00;
}

当然，这是一个JSFiddle。

我如何使用css制作一排在浏览器缩小时不会换行的盒子？

1 个答案: