如何防止列用HTML换行？

时间：2018-10-06 09:41:16

标签： html

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

Division Layout

但是我需要做很多行，并且我希望列的大小是特定的，并且如果它超过屏幕的大小，则不要写到另一行。例如，假设我有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％，这真是太小了。

我已经尝试过使用“溢出：滚动；”和“ display：inline;”但我没有成功。

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

Map Image

而且编码都是直接输入到正文中的，很难阅读和编辑。

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

3 个答案:

答案 0 :(得分：1)

您可以将主体宽度设置为想要的宽度。 

body{width: 3000px}

这是您要做什么吗？

答案 1 :(得分：1)

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

for file_id, i in enumerate(soup.find_all('a',class_='black')):
    pdfkit.from_url(['http://mycode.com'+i['href']], str(file_id) + '.pdf')

然后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;
}

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

答案 2 :(得分：1)

通过简化HTML，您可以使用CSS网格：

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  /* triggering the grid layout: */
  display: grid;
  /* defining 10 columns, each of 200px width: */
  grid-template-columns: repeat(10, 200px);
  /* defining a 2px gutter between grid-items
     (purely aesthetic, and not required;
     adjust to taste: */
  grid-gap: 2px;
}

.cell {
  height: 2em;
  border: 2px solid #000;
}
<div class="wrapper">
  <div class="cell">column 1</div>
  <div class="cell">column 2</div>
  <div class="cell">column 3</div>
  <div class="cell">column 4</div>
  <div class="cell">column 5</div>
  <div class="cell">column 6</div>
  <div class="cell">column 7</div>
  <div class="cell">column 8</div>
  <div class="cell">column 9</div>
  <div class="cell">column 10</div>
  <div class="cell">column 1</div>
  <div class="cell">column 2</div>
  <div class="cell">column 3</div>
  <div class="cell">column 4</div>
  <div class="cell">column 5</div>
  <div class="cell">column 6</div>
  <div class="cell">column 7</div>
  <div class="cell">column 8</div>
  <div class="cell">column 9</div>
  <div class="cell">column 10</div>
  <div class="cell">column 1</div>
  <div class="cell">column 2</div>
  <div class="cell">column 3</div>
  <div class="cell">column 4</div>
  <div class="cell">column 5</div>
  <div class="cell">column 6</div>
  <div class="cell">column 7</div>
  <div class="cell">column 8</div>
  <div class="cell">column 9</div>
  <div class="cell">column 10</div>
  <div class="cell">column 1</div>
  <div class="cell">column 2</div>
  <div class="cell">column 3</div>
  <div class="cell">column 4</div>
  <div class="cell">column 5</div>
  <div class="cell">column 6</div>
  <div class="cell">column 7</div>
  <div class="cell">column 8</div>
  <div class="cell">column 9</div>
  <div class="cell">column 10</div>
  <div class="cell">column 1</div>
  <div class="cell">column 2</div>
  <div class="cell">column 3</div>
  <div class="cell">column 4</div>
  <div class="cell">column 5</div>
  <div class="cell">column 6</div>
  <div class="cell">column 7</div>
  <div class="cell">column 8</div>
  <div class="cell">column 9</div>
  <div class="cell">column 10</div>
</div>

JS Fiddle demo。

如果您希望保留当前的HTML布局，则仍可以使用CSS网格（请注意，您发布的代码只有四个“列”，而您的问题指定的是 ten ，因此区别在于十列和四列布局之间的连接完全是基于这种差异）：

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-gap: 2px;
  margin-bottom: 2px;
}
<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>

JS Fiddle demo。

您当然也可以使用CSS弹性框布局：

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  /* triggers the flexbox layout: */
  display: flex;
  /* this prevents the child elements from wrapping
     to a new line: */
  flex-wrap: nowrap;
}

.column {
  /* shorthand for:
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
   'flex-grow' and 'flex-shrink' define the amount by
   which a given item will grow, or shrink, to fill
   the available space within the parent; 'flex-basis'
   defines the initial size of the flex-item: */
  flex: 1 1 200px;
  /* because we're using the flex-layout for a non-flexible
     layout we're defining both the min-, and max-, width
     to force the element to remain the same size: */
  min-width: 200px;
  max-width: 200px;
}
<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>

JS Fiddle demo。

值得注意的是，尽管flex-layout可以实现我们想要的功能，但我们使用的是故意灵活的布局模式，在设计中定义了非灵活的布局；因此最好使用CSS网格或以下格式：

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  /* prevents the child elements from wrapping to new lines: */
  white-space: nowrap;
}

.column {
  /* allows the elements to be both inline and with a defined
     size (which display: inline wouldn't allow): */
  display: inline-block;
  width: 200px;
}
<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>

JS Fiddle demo。

这是所列方法中最向后兼容的方法，似乎符合用例和要求。

参考文献：

相关问题
最新问题