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

Question

我正在尝试重新创建从用户体验设计师那里获得的设计，

该设计是为 1440 像素的屏幕尺寸创建的，预计将在 992 像素的范围内响应，经过大量工作尝试将我的 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;
 }

Answer 1

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

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