响应式内容进入响应式网页

Question

我没有编码响应式网页的经验，但我想将响应式内容添加到已经响应式的wordpress主题中。

我想使两个盒子在一行中，一个与广告感知单位，另一个与帖子缩略图和按钮。

这是可行的，但我猜这并不是一种干净的方式。

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

​

.table{显示:表格；宽度:100%；最小高度:230px；页边距:0；}

.cell {垂直对齐:顶部；显示:表格单元格；宽度:50%；最小宽度:230px；页边距:0；文本对齐:居中；}

背景{.rightside-color：#9baa32；} .leftside{背景色：#f37820；}

@纯媒体屏幕和(最大宽度: 400px) { .table{显示:块；}

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

}

JSBin

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