Question

我正在尝试在网页上添加四个均匀间隔的列，以便在调整浏览器窗口大小时保留其结构。我是根据我现在无法找到的教程以这种方式构建的。在调整浏览器窗口大小之前，它们看起来很好。任何人都可以告诉我为什么我的第3和第4列在浏览器窗口调整大小时保持在前两个下面？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

您为第一列和其他列指定了不同的宽度，为了使其可以调整大小，应该给出百分比宽度，或者您必须使用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>

Answer 2

您正在为第一列设置固定宽度，这不是自适应的，并且正在推回最后的div。如果您需要固定宽度，但仍希望保持每个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 3

你的col1宽度为350px。一旦达到一定的尺寸，22％+ 22％+ 22％+ 350px大于ColumnMain的宽度。所以它推下了一些列，所以他们都适合。

Answer 4

你的div被包裹在另一个之间的原因是因为当浏览器调整大小时，它会达到你在那些单独的.col类上的那些宽度，并且它不再适合，因此div会相互重叠。< / p>

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

Answer 6

filterWithState

Answer 7

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么我的列包装窗口调整大小？

7 个答案: