时间戳

首页 > 解决方案 > 如何防止列包含在 HTML 中？

html - 如何防止列包含在 HTML 中？

问题描述

我正在尝试对类似于这张图片中的输出的单元格进行布局：

分部布局

但是我需要做很多行，并且我希望列具有特定的大小，并且如果超过屏幕的大小，则不要包裹到另一行。例如，假设我有 10 列，每列 200 像素。如果屏幕上无法容纳的列太多，我想要水平滚动，而不是包裹其他列。我的代码类似于（当我第一次尝试使用表格时，我从 W3Schools.com 网站上获得了它）：

.column {
   float: left;
   width: 100px;
   padding: 10px;
}

.row:after {
   content: "";
   display: table;
   clear: both;
}

<div class="row">
   <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
   </div>
   <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
   </div>
   <div class="column" style="background-color:#aaa;">
      <h2>Column 3</h2>
      <p>Some text..</p>
   </div>
   <div class="column" style="background-color:#bbb;">
      <h2>Column 4</h2>
      <p>Some text..</p>
   </div>
</div>
<div class="row">
   <div class="column" style="background-color:#bbb;">
      <h2>Column 1</h2>
      <p>Some text..</p>
   </div>
   <div class="column" style="background-color:#aaa;">
      <h2>Column 2</h2>
      <p>Some text..</p>
   </div>
   <div class="column" style="background-color:#bbb;">
      <h2>Column 3</h2>
      <p>Some text..</p>
   </div>
   <div class="column" style="background-color:#aaa;">
      <h2>Column 4</h2>
      <p>Some text..</p>
   </div>
</div>

只要没有足够的列超过屏幕的大小，这效果很好，但我需要它比屏幕宽（无论是那个还是我的最终实现最终都会将一堆列设置为 2% 宽度屏幕会小得离谱）。

我尝试过使用“溢出：滚动；” 和“显示：内联；” 但我没有任何成功。

作为参考，原始项目如下所示：

地图图像

而且编码都是直接输入正文，阅读和编​​辑非常困难。

<FONT COLOR=CYAN>Star type in angle brackets, &lt; &gt;, means the Star is in The Rift</FONT>
+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+
|            |            |            |            |            |            |            |            |            |            |            |            | Fuoss      |            |            |            |            |            | Piceance   |            |            |            | Kimberlite |            |            |            |            |            |            |            |            |            |
|            |     <FONT COLOR=MAGENTA>M</FONT>      |            |            |            |            |            |            |            |     <FONT COLOR="#0000FF">H</FONT>      |            |     <FONT COLOR=WHITE>N</FONT>      |     <FONT COLOR=WHITE>N</FONT>      |            |            |     <FONT COLOR=MAGENTA>M</FONT>      |            |            |     <FONT COLOR=MAGENTA>M</FONT>      |     <FONT COLOR=RED>R</FONT>      |            |     <FONT COLOR="#00FF00">A</FONT>      |     <FONT COLOR=MAGENTA>M</FONT>      |            |            |     <FONT COLOR=YELLOW>X</FONT>      |            |            |            |            |            |            |
|            | DowChem    |            |            |            |            |            |            |            | Hewlett-Packard         | Erin       |            |            |            | Elkhorn    |            |            |            | New Jerusalem           | Lyra       |            |            |            | Morgan     |            |            |            |            |            |            |
+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------

标签： html

解决方案

您可以将 div 包装在具有以下属性的容器中：

.container {
    width: max-content;
    overflow: auto;
}

然后 div 的宽度与它需要的一样宽 ( max-content) 并且如果您的列数多于视口的宽度，则应该滚动。

.column {
   float: left;
   width: 100px;
   padding: 10px;
}

.row {
   content: "";
   display: table;
   clear: both;
}

.container {
  width: max-content;
  overflow: auto;
}
<div class="container">
  <div class="row">
     <div class="column" style="background-color:#bbb;">
        <h2>Column 1</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 2</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#bbb;">
        <h2>Column 3</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 4</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#bbb;">
        <h2>Column 1</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 2</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#bbb;">
        <h2>Column 3</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 4</h2>
        <p>Some text..</p>
     </div>
   </div>
   <div class="row">
     <div class="column" style="background-color:#bbb;">
        <h2>Column 1</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 2</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#bbb;">
        <h2>Column 3</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 4</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#bbb;">
        <h2>Column 1</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 2</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#bbb;">
        <h2>Column 3</h2>
        <p>Some text..</p>
     </div>
     <div class="column" style="background-color:#aaa;">
        <h2>Column 4</h2>
        <p>Some text..</p>
     </div>
   </div>
</div>

添加了代码段，因此您可以检查这是否是您需要的。

推荐阅读