Question

我没有编写响应式网络的经验，但我想在已经响应的wordpress主题中添加一段响应式内容。

我想在一行中创建两个框，一个带有adsense单元，另一个带有缩略图和按钮。

这样可行，但我想这不是很干净的方式。

<div style="width:100%;min-height:230px">

<div style="width:50%;float:left;min-width:230px">
adsense here
</div>

<div style="width:50%;float:left;text-align:center;min-width:230px" id='playGameButton'>
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?><br />
<a href='#' class='big-button bigblue'>Play Game</a>
</div>

</div>

非常感谢任何帮助！谢谢！

Answer 1

这是一种方法。您可以添加媒体查询以使其更具响应性。

<div class="cell leftside">
adsense here
</div>

<div class="cell rightside">
&lt;?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?&gt;<br />
<a href='#' class='big-button bigblue'>Play Game</a>
</div>

。表{ 显示：表; 宽度：100％; 最小高度：230px; 余量：0; }

.cell { vertical-align：top; 显示：表细胞; 宽度：50％; 最小宽度：230px; 余量：0; 文本对齐：中心; }

.rightside { 背景色：＃9baa32; } 。左边{ 背景色：＃f37820; }

@media only screen and（max-width：400px）{ 。表{ 显示：块; }

.cell {
  display:block;
  width:100%;
  min-height:230px;
}

}

JSBin

http://jsbin.com/tezora/3/

响应内容到响应式网页

1 个答案: