如何使用自定义 wordpress 主题使 div 具有响应性？答案

【问题标题】：How to make divs responsive using a custom wordpress theme?如何使用自定义 wordpress 主题使 div 具有响应性？
【发布时间】：2016-08-10 23:36:39
【问题描述】：

我有一个正在使用的自定义 wordpress 主题，并且我正在编辑我的一个页面。我创建了 3 个 div，它们基本上应该在页面中心水平对齐。我想出了如何正确对齐所有内容，但我需要它做出响应。当我从移动设备查看网页时，div 甚至没有完全出现在屏幕上，也没有滚动条。

请查看图片以了解其外观。三个 div 显示“查找答案、提交工单和与代理聊天”链接：

这是我创建这些 div 的代码：

<center>
<div style="width: 900px;">

<a href="http://neawebservices.com/client/knowledgebase.php" target="_blank"><div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;">
<h3 class="priceplanhr">Find Answers</h3>
<img class="alignnone wp-image-980 size-full" src="http://neawebservices.com/wp-content/uploads/2016/04/64-X-64.png" alt="" width="66" height="44" />

</div></a>

<a href="https://neawebservices.com/client/submitticket.php" target="_blank"><div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;">
<h3 class="priceplanhr">Submit a Ticket</h3>
<img class="alignnone wp-image-980 size-full" src="http://neawebservices.com/wp-content/uploads/2016/04/128-X-128-3.png" alt="" width="66" height="44" />

</div></a>

<a href="javascript:void(Tawk_API.toggle())"><div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;">
<h3 class="priceplanhr">Chat with an Agent</h3>
<img class="alignnone wp-image-980 size-full" src="http://neawebservices.com/wp-content/uploads/2016/04/64-X-64-1.png" alt="" width="55" height="55" />

</div></a>
</div>
</center>

主题使用外部 css，但如果我可以使用内联 css 获得相同的响应效果，那就太好了。

如果我能在这方面得到任何帮助，我将不胜感激！

【问题讨论】：

标签： html css wordpress responsive

【解决方案1】：

CSS3 media queries 是你在这里的朋友，不，他们不能内联完成。无论如何，最好不要使用内联 CSS。

您可以构建自己的媒体查询（请参阅 here）或将主题转换为 CSS 框架，例如 Bootstrap 或 Foundation（我个人更喜欢 Foundation）来为您完成。

【讨论】：