Html 3列设置CSS问题

您好，我正在尝试使用下面的代码设置三个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;
}

**CSS**
.col1{
背景色：#ddf；
浮动：左；
}
.col2{
背景色：#dfd；
浮动：无；
}
.col3{
背景色：#fdd；
浮动：对；
}

但是如果你看一看，我就不能让它工作 您可以看到最后一列与其他两列不对齐

---

感谢您的帮助

设置每个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;
}

---

将每个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;
}

我建议你去看看

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

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