Html 与图像并排的响应性3 div

如何在div下对齐div内的图像和内容。尝试使用float left，但不起作用

快速浏览
以下是CSS：

.container {
   clear: both;
   padding: 0px;
   margin: 0px;
  overflow:hidden;
 }
.profile1 {
  background-color: #CCF;
 }
.profile2 {
 background-color: #CFC;
}
.profile3 {
 background-color: #FCC;
}
@media only screen and (min-width: 480px) {
 .span_1_of_3 {
  width: 32.2%;
}
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child {
 margin-left: 0;
}
}

HTML:

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

左侧的浮动图像似乎工作正常：

---

DRD的aswer很好，您也可以使用

align=“left”

内

img

标签

<img src="http://placehold.it/100x100" align="left"/>

@Sharanpreet的align属性在HTML5中不受支持。改用CSS。

你能更清楚地解释你想要的行为吗？一张你想要的图片也很有帮助。现在图片和内容不能并排排列。内容从图片底部开始这应该作为注释而不是答案列出。

.col > img {
    float: left;
}

<img src="http://placehold.it/100x100" align="left"/>