我用一些自定义 css 设计了一个表格元素,它有效地在三列文本的每一列上方放置了一张图片。
这在移动设备(特别是 iPhone 5)上不起作用,所以我正在努力将其重新配置为 6 行,即 pic / text under / pic / text under etc,全部向左排列。
谁能指出我正确的方向?
谢谢吉姆
<style>
.row2{}
.col2{margin: 12px; width: 26%; float:left}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
{
.row2{width: 100%; float: clear: both;}
.col2{margin: 10px; width: 100%; float: clear: both;}
}
</style>
<div class="row2">
<div class="col2"><a href="http://tcf-consulting.com/wp/wp-content/uploads/2014/04/stephen_rosling1.png"><img class="alignleft size-full wp-image-195" alt="stephen_rosling" src="http://tcf-consulting.com/wp/wp-content/uploads/2014/04/stephen_rosling1.png" width="225" height="242" /></a></div>
<div class="col2"><a href="http://tcf-consulting.com/wp/wp-content/uploads/2014/04/john_orourke2.png"><img class="size-full wp-image-211 alignleft" alt="john_orourke" src="http://tcf-consulting.com/wp/wp-content/uploads/2014/04/john_orourke2.png" width="225" height="242" /></a></div>
<div class="col2"><a href="http://tcf-consulting.com/wp/wp-content/uploads/2014/04/tbc1.png"><img class="size-full wp-image-197 alignleft" alt="tbc" src="http://tcf-consulting.com/wp/wp-content/uploads/2014/04/tbc1.png" width="225" height="242" /></a></div>
</div>
<div class="row">
<div class="col2"><strong>Stephen Rosling</strong> has worked in the UK financial services sector for over 25 years, holding senior customer management positions in Aviva, Friends Life, Friends Provident International. He is currently working with Lloyds Banking Group on a major transformational project.</div>
<div class="col2"><strong>John O’Rorke</strong> has worked in the international financial services sector for over 30 years, holding senior management positions in the UK and Australia with Lloyd’s Life Assurance, Royal Insurance and the Prudential.</div>
<div class="col2"><strong>Satya Narayanan</strong> has more than 20 years of working experience in Asia Pacific, largely in the telecommunication services sector. He held senior customer service positions in Lucent Technologies and Alcatel-Lucent. He now specialises in Customer Experience analysis in the areas of Netpromoter (NPS), Customer Satisfaction and employee engagement including survey design, execution, analysis and reporting. He is currently engaged with a major General Insurance group in Malaysia.</div>
</div>