Блог

у меня есть макет блока компонентов с изображением слева / справа содержимое должно быть выровнено по вертикали посередине. И он должен быть адаптивным для мобильных устройств в виде макета изображения сверху содержимого внизу. Нажмите здесь для попытки Jsfiddle: 1 ссылка на код

я пробовал использовать .обертку для отображения таблицы и .img-wrap, .content-wrap для отображения таблицы-ячейки, которые отлично работают на рабочем столе, но когда дело доходит до мобильных устройств, в каждом компонентном блоке должно быть изображение сверху, а содержимое внизу. Нажмите здесь для попытки Jsfiddle: 2 ссылки на код

Результатом моего желания было получить результат попытки 2 (для настольных компьютеров) и попытки 1 (для мобильных устройств). Желательно использовать один и тот же html-макет для обоих, если возможно — Попробуйте 1 HTML.

Обновить:

Я пробовал использовать другой подход (ссылка как показано ниже), который я нашел в CSS Tricks at fist, я думал, что он центрируется по вертикали, но затем, после того, как я начинаю добавлять больше текстового содержимого, он больше не работает. Кто-нибудь знает почему?

Нажмите здесь, чтобы попробовать Jsfiddle: 3 ссылка на код

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%;
    }
}
  

Я предлагаю использовать 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%;
    }
}
  

скрипка