时间戳

首页 > 解决方案 > 连续显示两个 Div 列，这样它也可以与 AMP（加速移动页面）一起使用

javascript - 连续显示两个 Div 列，这样它也可以与 AMP（加速移动页面）一起使用

问题描述

我正在尝试在左侧显示图像（缩略图），在右侧显示一些文本（在 h3 标签中）。

这是我的代码：

CSS

/* Create two equal columns that floats next to each other */
.techrbunrelatedarticlescolumn {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.techrbunrelatedarticlesrow:after {
  content: "";
  display: table;
  clear: both;
}

PHP

<?php while (have_posts()) : the_post(); ?>
        <?php if (has_post_thumbnail()):?>
        <a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="techrbunrelatedarticlesrow">
  <div class="techrbunrelatedarticlescolumn" style="padding-right:10px;">
  <img height="200" max-width="300" title="<?php the_title(); ?>" src="<?php the_post_thumbnail_url(); ?>">
  </div>
  <div class="techrbunrelatedarticlescolumn">
    <h3><?php the_title(); ?></h3>
    
  </div>
</div>
</a>
<br/>

        <?php endif; ?>
    <?php endwhile; ?>

这通常工作得很好。但是，当我激活 amp 插件（删除 AMP 中不允许的所有元素）时，图像开始显示在文本上方，从而破坏了结构。

任何人都可以帮我找出一种在不违反 AMP 限制的情况下工作的方法吗？

标签： javascripthtmlcssamp-html

解决方案

实际的问题是我不知道你不能在任何你想要的地方声明块。AMP 只允许每页一个样式块。通过将所有 CSS 放在一个块下解决了这个问题！

推荐阅读