html - 3 列设置 CSS 问题

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 设置为宽度为 33% 的内联 block ，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 的大小。