html - 如何将 div 包裹在图像周围，以响应更大和更小的 PC 屏幕尺寸

Question

我正在尝试重新创建从 UX 设计师那里获得的设计，

该设计是为 1440px 的屏幕尺寸创建的，预计将在 992px 上响应，经过大量工作试图将我的 div 包裹在图像周围，这就是我得到的

这里的问题是，是否有一种标准方法可以将 div 包裹在图像周围以完美契合...下面是我的示例代码

HTML

<div class="goal">
<div class="col-md-4 col-xs-12" style="padding: 0">
    <img src="assets/images/image4.png">
</div>
<div class="goal-txt col-md-8 col-xs-12">
    <h2>Vivamus quis</h2>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus imperdiet ultrices. Proin at sagittis dolor. Nam nec ligula mi. Donec tortor purus, aliquet quis rutrum in, lobortis ut justo. Sed ultricies mauris a dignissim finibus. Curabitur feugiat, lorem eget congue suscipit, felis massa facilisis turpis, vel euismod dui turpis in odio. Aliquam ultricies pretium diam, sed ultrices odio posuere vitae. Donec commodo velit vitae nunc interdum, vitae ultrices dolor sagittis. Praesent tincidunt nibh at nisl cursus, eget commodo turpis dapibus. Fusce ac suscipit leo, at euismod velit. Curabitur consequat bibendum justo nec ultricies. Cras nec lacus eu dolor vehicula mattis. In hac habitasse platea dictumst.</p>
    <ul>
        <li>Etiam libero urna, tempor non.</li>
        <li>Sed vitae molestie ligula. Donec.</li>
        <li>Etiam libero urna, tempor non.</li>
        <li>Sed vitae molestie ligula. Donec.</li>
        <li>Etiam libero urna, tempor non.</li>
        <li>Sed vitae molestie ligula. Donec.</li>
    </ul>
</div> </div>

CSS

.goal-txt {
    background: #F4F7FC;
    padding: 32px 78px 86px 78px;
 }

标签： htmlcss

Answer 1

问题是因为您的图像高度为 713px，而您的文本内容高度较低。我会说给你的goal-txt和你的图片一样高。所以这使得：

.goal-txt {
    max-height: 713px;
    overflow-y: scroll;
 }