Question

我正在制作我的第一个响应式WordPress主题。在处理single.php和comments.php时遇到了一些麻烦。出于某种原因，评论部分正在推动侧边栏。我也无法使评论响应，我认为这可能是问题的一部分，因为当我完全从single.php删除评论部分时，所有内容都正确排列。

以下是我所说的http://mockup.artxwpn.com/2017/01/19/hello-world/

页面的链接

Answer 1

只需将来自.container::after, .row::after, .u-cf的{{1}}的{{1}}改为display: block; display: inline;的{{1}}

完整示例：

Answer 2

这是因为您的#comment和#submit具有固定的宽度值。尝试使用媒体查询，或者只需将width:600px更改为width:100% 像这样：

#comment {
        background: #fff;
        color: #000;
        border-color: #efefef;
        font-size: 15px;
        font-style: normal;
        font-weight: normal;
        width: 100%;
        padding: 5px;
        border: 1px solid #000;
        height: 100px;
        margin: 10px 15px 10px 0px;
        -webkit-box-shadow: inset 0px 0px 15px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: inset 0px 0px 15px -10px rgba(0,0,0,0.75);
        box-shadow: inset 0px 0px 15px -10px rgba(0,0,0,0.75);
        font-family: 'Quicksand', sans-serif;
        border: 1px solid #f1f1f1;
    }


  #submit {
        width: 100%;
        height: 55px;
        font-size: 17px;
        line-height: normal;
        border: 1px solid #000;
        color: #fff;
        background: #000;
        font-family: 'Quicksand', sans-serif;
        text-transform: uppercase;
    }

Answer 3

您已经关闭了侧边栏之前的行，您需要保持一行以便正确对齐。你的html结构应该是这样的。它会正确对齐侧边栏

<div class="row">
<div class="eight columns" id="content"></div>
<div class="four columns" id="sidebar"></div>
</div>

现在你的html结构是这样的

<div class="row">
    <div class="eight columns" id="content"></div>
</div>
<div class="four columns" id="sidebar"></div>

Answer 4

您的侧边栏不在同一个<?php $username = "stackoverflow"; $password = "thanksstackoverflow"; $host = "localhost"; $database="homedb"; $server = mysql_connect($host, $username, $password); $connection = mysql_select_db($database, $server); if ($connection->connect_error) { die("Connection failed: " . $connection->connect_error); } echo "Connected successfully"; $myquery = "SELECT 'lat', 'lon' FROM 'test01'; $query = mysql_query($myquery); if (!$query) { echo mysql_error(); die; } $data = array(); echo "var planelatlong = ["; for ($x = 0; $x < mysql_num_rows($query); $x++) { $data[] = mysql_fetch_assoc($query); echo "[",$data[$x]['lat'],",",$data[$x]['lon'],"]"; if ($x <= (mysql_num_rows($query)-2) ) { echo ","; } } echo "];"; mysql_close($server); ?>内，似乎您之后正在加载它。

尝试将其包含在同一<div class="row"></div>。

中

row

我在谷歌Chrome控制台中对此进行了测试，但确实有效。

评论推动侧边栏向下

4 个答案: