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;
}

图像和文本结构也是不规则的。因此，在添加上述内容之后，您需要为所有图像和文本提供一个恒定的结构，以便组织良好。

Answer 2

<img src="imagename.jpg" class="img-responsive">

如果你有引导链接

，请使用类img-responsive

Answer 3

根据消息来源，并非所有<p>都包含img和文章，例如＆＃34;内部作业＆＃34;。

1）因为img标签在左边floating，你需要清除

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

2）使显示为内联块;

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

并将文章包装在另一个文章中，并将添加内联块添加到该div以及

Answer 4

如果您可以修改内容，请转到包含图片的每个<p>标记，然后添加style="clear:both"。

这不是一个好的解决方案，但目前的html结构没有其他建议。

格式化图像对齐和文本以进行响应式设计

4 个答案: