logo标签列表

为什么我的列会随着窗口调整而换行？

htmlcssmultiple-columnsword-wrap
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>

4
因为你的第一栏宽度固定为350像素，所以当屏幕变小时，该div会占用更多的屏幕空间，因为它不会按比例缩放。 - Matthew
7个回答
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>

0

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

而且，使用margin也无法与相同的百分比宽度配合使用。在这种情况下，您必须根据窗口/文档宽度计算每个列的宽度，并在应用margin/padding后将其应用于宽度样式中。您还必须在窗口调整大小事件上进行相同的计算。

从您的列样式中删除margin并添加以下属性：

box-sizing:border-box;

为了测试目的，我已将您的第一列宽度更改为200像素，最好为每列分配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：不用谢。但是如果我的答案更合适并且对你有用，我不知道赏金分配的逻辑。 - Sandip - Frontend Developer
0

你的col1宽度为350像素。一旦它达到一定大小，22% + 22% + 22% + 350px就会大于ColumnMain的宽度。因此，它会将某些列向下推，以便它们都能适应。

即使窗口宽度为600像素，列仍然换行...为什么？ - blurfus
600像素的22％为132像素。 132 + 132 + 132 + 350 = 746。因此，由于列宽总和大于窗口宽度，两列正在被推入下方。 350 + 132 = 482，如果我们再添加132，它将变为614，这比窗口宽度更大，所以这就是为什么有2个被推入下方的原因。 - Sensoray
0
你的div被包裹在一起的原因是因为当浏览器调整大小时，它会达到那些你在每个.col类上设置的宽度，无法再适合，所以div会彼此叠放。
0

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

0

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

0

更简单、更清晰的方法是重写 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;
}
完全没有问题，很高兴能够帮忙。您会发现我的解决方案实际上是最佳选择，而不是您投票选为最佳答案的那个答案。让我解释一下原因。当您在第一列中拥有像素宽度时，第一列始终保持相同的大小，而最后一列将会向下移动：http://i.imgur.com/WY6vs9G.gifv现在，当您将第一列设置为百分比宽度时，即使所有列都具有百分比宽度，最后一列始终是最大的：http://i.imgur.com/usDyQFJ.gifv通过我的解决方案，列大小始终是所需的相等的：http://i.imgur.com/6zUZDCe.gifv - Ken
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接