Question

我为我使用Bootstrap 4，我需要解决两个问题。

缩小图像，保持比例。
当我在图片的右侧放置一个长文字（40个字符）时-它会在图片下方移动

<div class="container" style="margin-top:110px;"  >
    <div class="d-flex flex-wrap">
        <div style="float:left">
            <img class="img-fluid z-depth-2 rounded" src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Image))" />
        </div>
        <div style="float:left">
            <h1 style="margin-left:300px" class="">@Model.Name</h1>
            <h5 style="margin-left:40px" class="">@Model.About</h5>
        </div>
    </div>
</div>

Answer 1

<div class="container" style="margin-top:110px;"  >
<div class="d-flex flex-wrap">
    <div style="float:left">
        <img class="img-fluid z-depth-2 rounded" src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Image))" />
    </div>
    <div style="float:right">
        <h1 style="margin-left:300px" class="">@Model.Name</h1>
        <h5 style="margin-left:40px" class="">@Model.About</h5>
    </div>
</div>

尝试

可能的解决方案可以是：使用flex-wrap属性将其设置为nowrap https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

一排长文字和照片，缩小图片

1 个答案: