Question

您好我正在尝试使用下面的代码设置三个3列

<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>

**CSS**

.col1 {
    background-color: #ddf;
    float: left;
    }
    .col2 {
    background-color: #dfd;
    float: none;
    }
    .col3 {
    background-color: #fdd;
    float: right;
}

但如果你看一下http://paycoinfaucet.cf/test/，我就无法运作您看到最后一列与其他两列不对齐

感谢您的帮助

Answer 1

将宽度设置为每个div：

.col1 {
    background-color: #ddf;
    float: left;
    width: 300px;
    }
    .col2 {
    background-color: #dfd;
    float: left;
    width: 447px;
    }
    .col3 {
    background-color: #fdd;
    float: left;
    width: 300px;
}

并将它们全部浮动到左侧

Answer 2

将每个div设置为内联块，宽度为33％，div将随页面调整大小。

.col1 {
    display: inline-block; 
    width: 33%;   
    background-color: #ddf;
}
.col2 {
    display: inline-block; 
    width: 33%; 
    background-color: #dfd;
}
.col3 {
    display: inline-block; 
    width: 33%; 
    background-color: #fdd;
}

我建议你看看bootstrap rows

<row>
 <div class="col1 col-md-4"></div>
 <div class="col2 col-md-4"></div>
 <div class="col3 col-md-4"></div>
</row>

此解决方案不需要额外的CSS，您可以根据屏幕大小自定义div的大小。

3列设置CSS问题

2 个答案: