Question

我是html / css的新手，并且我的项目有问题。我正在尝试为页面底部创建3列布局。我现在所拥有的已经接近我想要的了，但是它并不能填满屏幕的宽度。它们全部聚集在左侧，并且无法拉伸以匹配屏幕。我回过头来，跟随了w3schools的示例，但它仍然没有用。我想念什么？

HTML

<div class="row">
  <div class="column">
    <h1>FOLLOW ME ON <br> INSTAGRAM</h1>
  </div>
  <div class="column">
    <h2>contact me</h2>
  </div>
  <div class="column">
    <h1>SUBSCRIBE</h1>
  </div>
</div>

CSS

.column {
    float: left;
    padding: 10px;
    height: 300px;
    text-align: center;
    position: relative;
}

.column.side { 
    width: 25%;
}

.column.middle { 
    width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

Answer 1

为什么不使用.col-xs-4？而且您不应该在cols上使用width，那么为什么要使用col呢？

Answer 2

两件事：

1。）正如@chojnicki在评论中所写，您需要将CSS中定义的类（.side，.middle）添加到HTML

2。）将padding包括在width中，以便获得总计100％的总和（为了避免最后一列，总和为不）（在第二个选项下）以增加宽度（25％+ 50％+ 25％），您需要为所有内容添加box-sizing: border-box;（使用*选择器）：

* {
  box-sizing: border-box;
}

.column {
  float: left;
  padding: 10px;
  height: 300px;
  text-align: center;
  position: relative;
}

.column.side {
  width: 25%;
}

.column.middle {
  width: 50%;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

<div class="row">
  <div class="column side">
    <h1>FOLLOW ME ON <br> INSTAGRAM</h1>
  </div>
  <div class="column middle">
    <h2>contact me</h2>
  </div>
  <div class="column side">
    <h1>SUBSCRIBE</h1>
  </div>
</div>

Answer 3

如果您想在内部填充padding元素，则需要设置box-sizing: border-box。

.row {
  width: 100%;
}

.column {
  float: left;
  padding: 10px;
  height: 300px;
  text-align: center;
  box-sizing: border-box;
}

.column.side { 
  width: 25%;
}

.column.middle { 
  width: 50%;
}

<div class="row">
  <div class="column side">
    <h1>FOLLOW ME ON <br> INSTAGRAM</h1>
  </div>
  <div class="column middle">
    <h2>contact me</h2>
  </div>
  <div class="column side">
    <h1>SUBSCRIBE</h1>
  </div>
</div>

3列布局不会填充屏幕宽度

3 个答案: