如何将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;
 }

Answer 1

问题是因为您的图像高度为713px，而文本内容的高度较小。我想说的是，您的目标文本与图片的高度相同。这样就可以了：

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