在一行中并排显示两个 Div 列，这样它也适用于 AMP（加速移动页面）

Question

我试图在左侧显示图像（缩略图），在右侧显示一些文本（在 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 限制的情况下工作吗？

Answer 1

实际的问题是我没有意识到您不能随心所欲地声明块。AMP 只允许每页一个样式块。通过将所有 CSS 放在一个块下解决了这个问题！

在一行中并排显示两个 Div 列，这样它也适用于 AMP（加速移动页面）

Display Two Div Columns Side By Side In A Row, Such That It Works With AMP (Accelerated Mobile Pages) As Well

html

javascript

css

amp-html