html - 使用 float 元素垂直对齐内容+响应式布局

Question

我有一个组件框布局，图像位于左/右+内容需要垂直居中对齐。它需要以顶部图像+底部内容的布局来响应移动设备。 Click Here for Jsfiddle Attempt: 1 Code Link

我尝试过使用.wrapper显示表格和.img-wrap、.content-wrap显示表格单元格 在桌面上工作正常，但在移动设备上，每个组件框必须在顶部有图像，在下面有内容。 Click here for Jsfiddle Attempt: 2 code Link

我想要的结果是获得尝试 2(针对桌面)和尝试 1(针对移动设备)的结果。如果可能的话，最好使用相同的 html 布局 - 尝试 1 HTML。

Update:

I've tried with a different approach (link as below) that i've found from CSS Tricks at fist i thought it does center vertically but then after i start adding more text content it doesn't works anymore. Does anyone know why?

Click here for Jsfiddle Attempt: 3 code Link

HTML - 尝试 3

<div class="wrapper">
    <div class="img-wrap left">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
    <div class="content-wrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div></p>
    </div></p>
    </div>
</div>
<div class="wrapper">
    <div class="img-wrap right">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
    <div class="content-wrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

CSS-尝试 3

* {
    box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    display: table;
    content:'';
}
.wrapper:after {
    clear:both;
}
.wrapper {
    width: 100%;
    height:auto;
    position :relative;
    max-width: 800px;
    display:block;
    margin: 30px auto;
    background: #f3f3f3;
    *zoom:1;
}
.wrapper:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
}
.img-wrap {
    width:30%;
}
.left {
    float:left;
}
.right {
    float: right;
}
.img-wrap img {
    display:block;
    width: 100%;
}
.content-wrap {
    display: inline-block;
    width: 70%;
    height: 100%;
    padding:20px;
    vertical-align:middle;
    position: relative;
}
.content-wrap:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
}
@media screen and (max-width:480px) {
    .right, .left {
        float:none;
    }
    .wrapper:before {
        display: none;
    }
    .img-wrap {
        width: 100%;
    }
    .content-wrap {
        width:100%;
    }
}

Answer 1

我建议使用display:table来实现vertical-align:

CSS

* {
    box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    display: table;
    content:'';
}
.wrapper:after {
    clear:both;
}
.wrapper {
    width: 100%;
    height:auto;
    position :relative;
    max-width: 800px;
    display:table;
    margin: 30px auto;
    background: #f3f3f3;
    vertical-align:middle;
    *zoom:1;
}
.img-wrap {
    display: table-cell;
    text-align: left;
}
.left {
    float:left;
}
.right {
    float: right;
}
.img-wrap img {
    display:block;
    width: 100%;
}
.content-wrap {
    display: table-cell;
    width: 70%;
    height: 100%;
    padding:20px;
    vertical-align:middle;
    position:relative;
}
@media screen and (max-width:750px) {
    .right, .left {
        float:none;
    }
    .img-wrap {
        width: 100%;
    }
    .content-wrap {
        width:100%;
    }
}

fiddle