时间戳

首页 > 解决方案 > 仅使用必要的高度将列浮动到右侧

css - 仅使用必要的高度将列浮动到右侧

问题描述

我想实现一个简单的网格，其中图像浮动在右侧，周围有流畅的文本。我可以通过将float: right属性添加到图像而不是其col-md-6容器来实现这一点。但是我希望如果设备是手机，则图像使用 a 具有全宽col-12，这就是我需要使用该列的原因。在 StackOverflow 中寻找相关问题，这是我现在拥有的一段代码：

<div class="row d-block">
    <div class="col-12 col-md-6 float-right">
        <img
            class="article-image ml-3 mb-1"
            src={{data.schema:thumbnailUrl}}
            onerror$="this.src={{defaultimage}}"
        />
    </div>
    <div class="col-12 col-md-6 float-left">
        <div class="article-body light-text">
            {{article.schema:articleBody}}
        </div>
    </div>
</div>

在这里，您可以看到问题的视觉效果。

当图像完成文本使用其下方留下的空间时，我该如何实现？

换句话说，当使用为小型设备维护 col-12 属性的大型设备时，如何实现包含图像的整个列向右浮动？

标签： cssbootstrap-4

解决方案

如果您使文本列全宽，它应该可以工作，因此您可以删除col-md-6...

<div class="container">
    <div class="row d-block">
        <div class="col-12 col-md-6  float-right">
            <img src="..." class="img-fluid" >
        </div>
        <div class="col-12"> 
        ... text here
        </div>
    </div>
</div>

演示

推荐阅读