为什么我的列与窗口大小相结合

我试图在一个网页上添加四个列，该网页在调整浏览器窗口时保持其结构。我基于一个我现在找不到的教程来构建它。它们看起来不错，直到调整浏览器窗口的大小为止。谁能告诉我为什么我的第三列和第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>

您将固定的宽度设置为第一列，该列不是自适应，并且正在向后推回最后一个divs。如果您需要固定的宽度，但仍然要保留每个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>

您已经为第一列和其他列指定了不同的宽度，为了使其可重述它们的宽度百分比宽度，否则您必须使用Bootstrap 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>

您的col1的宽度为350px。一旦达到一定尺寸，22％ 22％ 22％ 350px大于柱状杆的宽度。因此，它将一些列推向下来，以便它们都可以合适。

彼此包裹的原因是因为当浏览器大小时，它击中了您在那些单独的.col类中所拥有的宽度彼此。

只需重写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;
}

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

正如其他人所说的，.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>

相关内容

最新更新

热门标签：