Html 如何以正确的方式（和响应性！）进行设计？

我在我的Wordpress网站上有一个关于我们国家的图片和一些文字

这就是它在普通浏览器和手机上的外观：

现在，默认情况下，Wordpress不能很好地解析这一点。如果我只在我的列中插入文本和图像，则如下所示：

正如您所看到的，柱没有达到要求的高度。我的解决方案是添加一个固定高度为225px的div那看起来不错但是，响应的不是

当我调整窗口大小时，如下所示：

图像未调整大小。文字到处都是，柱子的高度太高了

我曾试图使图像具有响应性，但没有成功

我怎样才能正确设计它，使它在普通大小的屏幕和手机上看起来很棒

<div class="fusion-one-half one_half fusion-layout-column fusion-column last spacing-yes"><div class="fusion-column-wrapper" style="background-color:#ffffff;padding:10px;">
<h2>VIND DE BEWINDVOERDER IN UW REGIO</h2>
<p>Lorem Ipsum dolor sit amet.<br>
consetetuer adipiscing elit.<br>
<img class="alignright size-full wp-image-78" src="http://zekerfz.icode4u.nl/wp-content/uploads/2015/02/ZEKERFZ_website_home_home_2_09.png" alt="landkaart" width="292" height="350">&nbsp;Aenean commodo ligula<br>
eget dolor. Aenean massa.<br>
Cum soccis natoque<br>
penatibus et agnis dis<br>
parturient montes, nasectur<br>
ridiculus mus.</p>
<div id="landkaart"></div>
</div></div>

#landkaart {
height: 200px;
}
#landkaart img {
max-width:100%;
}

威斯康星州的维德·德·贝温德沃德
Lorem Ipsum door sit amet.

咨询精英。

艾尼安·科莫多·利古拉

埃吉特·多洛。埃尼安·马萨。

自然风景区
penatibus和agnis dis

临产孟氏鼻窦

小白鼠

#兰德卡特{
高度：200px；
}
#兰卡亚特img{
最大宽度：100%；
}

---

请参阅JSFIDLE以获取我的Wordpress专栏的副本：

不要在容器上设置高度。你的问题是你没有清除你的浮动。此外，当我调整窗口大小时，图像正在调整大小，以便最大宽度正常工作。如果你想让图像容器的大小变小，你需要设置断点的样式。明白了！我现在正在研究断点。我唯一不明白的是在哪里清除浮子。清除浮动解决了什么问题？每当您浮动一个项目时，它会将该项目从文档流中取出，并尝试包装每个正在进行的元素。在包含元素class=“fusion one half one\u half fusion layout column fusion column last spacing yes”之后添加。有更好的方法可以做到这一点，但这是一个初学者/简单的方法