響應式3 div與圖像並排

Question

如何在div下對齊div中的圖像和內容。 嘗試浮動左但不起作用

JS小提琴鏈接可快速概覽
這是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：

<div class="container" style="border:2px solid black;">
    <div class="col span_1_of_3 profile1"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
    <div class="col span_1_of_3 profile2"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
    <div class="col span_1_of_3 profile3"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
</div>

Answer 1

左側的浮動圖像似乎工作正常： http : //jsfiddle.net/rTZJ9/ 。

.col > img {
    float: left;
}

Answer 2

DRD的aswer很好，您也可以在img標簽中使用align="left" 。

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

Answer 3

@Sharanpreet HTML5不支持的align屬性。 改用CSS。