Html 移动设备上文本块旁边图像的CSS

最好的方法是什么

我有一个全宽行（320px）。160px一侧为图像，另一侧为文本。这是一种简单的浮动，还是有一种破坏性较小的方式

        <div class="two-up_img u-pull-right">
            <figure>
                <img src="../img/img.jpg">
            </figure>
        </div>

        <div class="two-up_info">
            <div class="inner">
                <h4 class="highlight">Rob</h4>
                <div class="small">
                    <p>Landing Page</p>
                    <p>Brand Identity</p>
                </div>
            </div>
        </div>

---

我正在使用一个名为Skeleton（）的框架，这就是

u-pull-right

的来源。它将元素向右浮动

您希望将html包装在父级

div

中，并将样式

clear:both

应用于该父级

div

看这把小提琴：

---

或者，如果您不关心支持旧浏览器，请查看flexbox:

这对您有帮助吗？

.two-up_info {
    height: 160px;
    background: #fff;
}

.two-up_info .inner {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.two-up_img {
    max-width: 50%;
}