为什么我的列以 window 调整大小换行？

Question

我正在尝试在网页上添加四列，间距均匀，以便在调整浏览器 window 大小时保持其结构。我是根据现在找不到的教程以这种方式构建的。在您调整浏览器 window 之前，它们看起来很好。谁能告诉我为什么当浏览器 window 调整大小时我的第 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>

Answer 1

您的 col1 宽度为 350px。一旦达到一定大小，22% +22% +22% + 350px 就大于 ColumnMain 的宽度。所以它将一些列向下推，以便它们都可以容纳。

Answer 2

您的 div 相互重叠的原因是，当浏览器调整大小时，它会达到您在 dividual .col 中的那些宽度 class 它再也装不下了，所以 div 一个接一个。

Answer 3

重写 CSS 更简单、更清晰，这样您只需要一个列选择器。这使得代码更易于维护和更改。例如，您只需更改一个位置的边框或内边距，它会自动作用于所有应用 class 的元素。以下是您希望完成的简化代码：

.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 代码中的第一列（最左边的列）之前不想要边框线，您可以在下面添加这个伪 class您的 .col 选择器：

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

Answer 4

您正在为第一列设置固定宽度，这不是自适应的，并且正在向后推最后 divs。如果您需要固定宽度，但仍希望每个 div 保持内联，则可以使用 display: table; 布局。这样您的第一个 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>

Answer 5

您已经为第一列和其他列指定了不同的宽度，要使其可调整大小，应该给它们指定百分比宽度，或者您必须使用 bootstrap CSS.

并且对于边距，它不会以相同的百分比宽度工作。在这种情况下，您必须在相对于 window/document 宽度应用 margin/padding 之后计算每个列的宽度，然后以宽度样式应用。您还必须在 window 调整大小事件中进行相同的计算。

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

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>

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

Answer 7

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

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

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

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

为什么我的列以 window 调整大小换行？

Why do my columns wrap with window resize?

html

css

word-wrap

multiple-columns