为什么我的列用窗口调整大小换行？答案

【问题标题】：Why do my columns wrap with window resize?为什么我的列用窗口调整大小换行？
【发布时间】：2017-05-30 20:03:56
【问题描述】：

我正在尝试在网页上添加四个等距的列，以在调整浏览器窗口大小时保持其结构。我是根据现在找不到的教程以这种方式构建的。在您调整浏览器窗口大小之前，它们看起来很好。谁能告诉我为什么在调整浏览器窗口大小时我的第 3 列和第 4 列一直在前两列之下？

#ColumnMain {
  width: 100%;
  height: auto;
  float: left;
  margin-left: auto;
  margin-right: auto;
  min-width: 44%
}

.col1 {
  float: left;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 350px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col2 {
  float: left;
  padding: 10px 20px 15px 20px;
  margin-left: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col3 {
  float: right;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
  overflow: hidden;
}

.col4 {
  float: right;
  padding: 10px 20px 15px 20px;
  margin-right: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
  Overflow: hidden;
}

<div class="columns" id="ColumnMain">
  <div class="col1">content-1</div>
  <div class="col2">content-2</div>
  <div class="col3">content-3</div>
  <div class="col4">content-4</div>
</div>

【问题讨论】：

因为您的第一列的固定宽度为 350px，因此当您缩小屏幕时，div 将占据更多屏幕，因为它无法缩放

标签： html css multiple-columns word-wrap

【解决方案1】：

您正在为第一列设置固定宽度，这不是自适应的，并且正在推回最后一个 div。如果您需要固定宽度，但仍希望每个 div 保持内联，则可以使用 display: table; 布局。这样，您的第一个 div 将始终具有相同的大小，而其他 div 将是动态的。

#ColumnMain {
display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  min-width: 44%
}

.col {
  display: table-cell;
  padding: 10px 20px 15px 20px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col1 {
  margin: 0;
  width: 350px;
}

.col2 {
  margin-left: 10px;
  width: 22%;
}

.col3 {
  margin: 0;
  width: 22%;
  overflow: hidden;
}

.col4 {
  margin-right: 10px;
  width: 22%;
  overflow: hidden;
}

<div class="columns" id="ColumnMain">
  <div class="col col1">content</div>
  <div class="col col2">content</div>
  <div class="col col3">content</div>
  <div class="col col4">content</div>
</div>

【讨论】：

【解决方案2】：

您为第一列和其他列指定了不同的宽度，为了使其可调整大小，它们应该被赋予百分比宽度，或者您必须使用引导 CSS。

而且对于边距，它也不适用于相同的百分比宽度。在这种情况下，您必须在应用相对于窗口/文档宽度的边距/填充后计算每个列的宽度，然后以宽度样式应用。您还必须在窗口调整大小事件上计算相同的值。

从列样式中删除边距并在下面添加一个属性：

box-sizing:border-box;

出于测试目的，我已将您的第一列宽度更改为 200px，最好为每列分配 25% 的宽度进行测试。

#ColumnMain {
      width: 100%;
      height: auto;
      float: left;
      margin-left: auto;
      margin-right: auto;
      min-width: 44%
    }

    .col1 {
      float: left;
      padding: 10px 20px 15px 20px;      
      width: 200px;
      height: 100px;
      border-left: solid 1px #35488C;
      box-sizing:border-box;
    }

    .col2 {
      float: left;
      padding: 10px 20px 15px 20px;      
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      box-sizing:border-box;
    }

    .col3 {
      float: left;
      padding: 10px 20px 15px 20px;     
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      overflow: hidden;
      box-sizing:border-box;
    }

    .col4 {
      float: left;
      padding: 10px 20px 15px 20px;     
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      Overflow: hidden;
      box-sizing:border-box;
    }

<div class="columns" id="ColumnMain">
  <div class="col1">content</div>
  <div class="col2">content</div>
  <div class="col3">content</div>
  <div class="col4">content</div>
</div>

【讨论】：

@kevin：不客气。但如果我的答案更适合你并为你工作，我不知道赏金分配的逻辑

【解决方案3】：

您的 col1 的宽度为 350 像素。一旦达到一定大小，22% +22% +22% + 350px 就比 ColumnMain 的宽度大。所以它会将一些柱子向下推，这样它们都可以适应。

【讨论】：

即使在窗口宽度为 600 像素的情况下，列也会被包裹在下面……这是怎么回事？
600 像素的 22% 是 132 像素。 132 + 132 + 132 + 350 = 746。因此，由于列宽加起来大于窗口宽度，因此两列被压在下面。 350 + 132 = 482，如果再加上132，就是614，比窗口的宽度还大，所以2被压在下面。

【解决方案4】：

您的 div 被相互包裹的原因是，当浏览器调整大小时，它会达到您在那些单独的 .col 类上拥有的宽度，并且它不再适合，因此 div 会相互包裹。

【讨论】：

【解决方案5】：

只需简单地重写 CSS，这样您只需要一个用于列的选择器就更容易和更简洁了。这使得代码更易于维护和更改。例如，您只需在一个位置更改边框或填充，它会自动适用于应用该类的所有元素。这是您希望完成的简化代码：

.col {
  float: left;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 25%;
  height: 100px;
  border-left: solid 1px #35488C;
  box-sizing: border-box;
}

<div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
</div>

这里是 gifv 格式的输出示例：http://i.imgur.com/VgBByqf.gifv

如果您决定不希望在第一列（最左边的列）之前添加边框线，那么在您的 CSS 代码中，您可以在 .col 选择器下方添加这个伪类：

.col:first-child {
  border-left: none;
}

【讨论】：

没问题，乐于助人。您会发现我的解决方案实际上是最好的方法，而不是您投票的最佳答案。让我解释一下为什么。当您在第一列中具有像素宽度时，第一列始终保持相同大小，最后一列将下降到下方：i.imgur.com/WY6vs9G.gifv 现在，当您将第一列设置为百分比宽度时，最后一列始终是最大的尽管所有列都有百分比宽度：i.imgur.com/usDyQFJ.gifv 在我的解决方案中，列大小总是根据需要相等：i.imgur.com/6zUZDCe.gifv

【解决方案6】：

<html>
        <head>    
        <style> 
        .cols_ex {     
         -webkit-columns: 4 10px;     
         -moz-columns: 4 10px;    
          columns: 4 10px;     
         -webkit-column-gap: 2em;     
         -moz-column-gap: 2em;     
          column-gap: 2em;     
         -webkit-column-rule: 2px dashed gray;    
         -moz-column-rule: 2px dashed gray;    
          column-rule: 2px dashed gray; 
       }  
       </style> 
       </head> 
       <body>    
       <div class="cols_ex">         
        <p>Just at this moment her head struck against the roof of the hall: in fact she was now rather more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.</p>        
        <p>Poor Alice! It was as much as she could do, lying down on one side, to look through into the garden with one eye; but to get through was more hopeless than ever: she sat down and began to cry again.</p>        
        <p>"You ought to be ashamed of yourself," said Alice,"a great girl like you" (she might well say this), "to go on crying in this way! Stop this moment, I tell          you!"</p>         
        <p>But she went on all the same, shedding gallons of tears,until there was a large pool all round her, about four inches deep, and reaching half down the hall.</p>     
       </div>
       </body> 


</html>

【讨论】：

【解决方案7】：

正如其他人所说，.col1 具有固定宽度，因此在某些时候，除固定宽度外，其他列上基于百分比的宽度将大于 100% 宽度，导致列换行。

创建这样一行列的更现代的方法是使用display: flex，这会将它们放在一行中并且它们不会换行（除非您指定要使用flex-wrap 换行） .

下面是一个@media 查询示例，它将在不同的屏幕宽度下以不同的方式排列列/行。

.columns {
  min-width: 44%;
  margin: auto;
  display: flex;
}

.col {
  padding: 10px 20px 15px 20px;
}

.col1 {
  width: 350px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col2 {
  margin-left: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col3 {
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col4 {
  margin-right: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

@media (max-width: 420px) {
  .columns {
    flex-direction: column;
  }
  .col {
    margin: 0;
    width: auto;
  }
}

<div class="columns" id="ColumnMain">
  <div class="col1 col">content</div>
  <div class="col2 col">content</div>
  <div class="col3 col">content</div>
  <div class="col4 col">content</div>
</div>

【讨论】：