我使用 1140px 网格系统将图像浮动到流体 div 中的标题旁边,如下所示:
<div class='row'>
<div class='sixcol'>
<img src='img/someImage.jpg'/>
</div>
<div class='sixcol last'>
<h2>Large Header Text</h2>
</div>
</div>
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.sixcol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .sixcol {
48%;
}
.sixcol h2 {
text-align: center;
}
.last {
margin-right: 0px;
}
img {
max-width: 100%;
height: auto;
}
@media handheld, only screen and (max-width: 767px) {
.row {
width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px;
}
.row .sixcol {
width: auto; float: none; margin-left: 0px; margin-right: 0px;
}
.sixcol h2 {
text-align: left;
}
}
对于智能手机,标题被推到图像下方并与容器的左侧对齐,而在桌面上,所需的效果是标题始终位于图像的右侧并垂直居中于展开/收缩的图像高度。有没有办法只使用 CSS 和 HTML 来做到这一点?有没有简单的 JS/jQuery 解决方案?