html - 为响应式设计格式化图像对齐和文本

Question

我正在尝试对博客文章进行格式化，以便无论在什么尺寸的屏幕上查看它都能正确显示。帖子在这里:http://cannotdecide.com/10-must-see-documentaries-on-netflix-canada-june-2015/

当前设置的方式，当您在浏览器/屏幕尺寸之间移动时，这是灾难性的。

最好的格式化方式是什么，这样无论设备大小如何，相互关联的图像和文本都不会在另一个之前开始？

编辑:

所以我的 CSS 中有这个:

.entry > p:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

.entry p > img{
  display: inline-block; 
  vertical-align: top; 
}

.article {
  display: inline-block; 
  vertical-align: top; 
}

下面是我在帖子中的代码:

<p><div class="entry"><img class="alignleft size-medium wp-image-14" style="padding: 10px;" src="http://cannotdecide.com/wp-content/uploads/2015/06/blackfish-203x300.jpg" alt="blackfish" width="203" height="300" /></div><div class="article"><strong>1. Blackfish</strong> - Explores the business of capturing and breeding orcas in captivity, including at SeaWorld, and the effects of captivity on the specifies commonly known as the "killer whale." The film focuses on Tilikum, a male orca who was captured in 1982, and features interviews with former SeaWorld trainers, marine biologists, and other experts in the field, as well as never-before-seen footage. See for yourself why Blackfish caused massive public outrage when it first aired in 2013.</div></p>

仍然没有任何运气。抱歉，我知道这是非常基本的。

Answer 1

您需要清除段落以占据整个宽度并不允许其他 div 重叠它。

.entry p {
  clear: both;
}

图文结构也不规则。因此，在添加上述内容后，您需要有一个恒定的结构，让所有的图像和文本看起来井井有条。