小编Bri*_*anM的帖子

我有一个目录页面,列出目录中的故事,我想在3列中显示它们.我希望输出在三列之间保持平衡,这样每列的高度大致相同.每个项目的高度都不相同.

但是我发现Chrome没有正确地平衡列,因此前两列很长,最后(第3)列非常短,通常只有1或2个项目.我添加了属性

column-fill: balance;

可以肯定的是,即使它应该是默认值,但它没有任何区别.任何帮助赞赏.

CSS

#catalogue-section  {
/* Prevent vertical gaps */
line-height: 0;

-webkit-column-count: 3;
-webkit-column-gap:   0px;
-webkit-column-fill: balance;
-moz-column-count:    3;
-moz-column-gap:      0px;
-moz-column-fill: balance;
column-count:         3;
column-gap:           0px;
column-fill:balance;

}

#catalogue-section div {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important; 
}

HTML

请参阅http://www.shortkidstories.com/story

如果您在IE或Firefox中转到此页面,则会平衡列,但不会在Chrome中进行平衡.

我想垂直对齐左侧浮动图像右侧的多行文本.

然而

• 图像尺寸(高度和宽度)将有所不同,并且事先未知
• 文本的长度也各不相同,通常包含多行
• 解决方案需要响应以适应不同的屏幕尺寸
• 解决方案不应涉及图像,div或其他任何内容的特定px宽度或高度尺寸
  • 我不想使用表格,因为当图像旁边的文字空间不足时,在某些情况下文本需要放在图像下方

我回顾过以前的问题,但没有什么能与我想要的完全匹配.它需要在任何设备上工作,因此我不能将绝对px值用于任何维度.

我应该如何设计以下样式来实现这一目标？

<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>

谢谢你的帮助.

我看了看,但我找不到一个Wordpress插件,它给了我在Slider中提供的所有以下功能:

• 从我自己开发的自定义帖子类型中显示自定义帖子 - - 显示特色图片,标题和摘录(不是完整帖子)
• 以随机顺序显示 - 来自该类型的100个自定义帖子的列表
• 响应因此适应屏幕/容器大小

图像和摘录的大小各不相同.

作为奖励,我想显示一些与帖子相关的自定义分类名称,尽管这并不重要.

我发现除了以随机顺序显示所有内容之外,或者它们没有响应,或者它们不支持自定义帖子类型,或者他们希望您创建一个由插件指定的特定类型的新自定义帖子类型.

如果它在那里,我不介意买正确的.