评论将侧边栏向下推

Question

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

这是我所说的页面的链接http://mockup.artxwpn.com/2017/01/19/hello-world/

Answer 1

只需将 css 从 .container::after, .row::after, .u-cf 从 display: block; 更改为 display: inline; 在行 419 从 style.css

完整示例：

.container::after, .row::after, .u-cf {
    clear: both;
    content: "";
    display: inline;
}

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

您的侧边栏不在同一个<div class="row"></div> 中，看来您是在之后加载它。

尝试将其包含在同一个 row 中。

<div class="row"><!-- Open row -->
     <div class="eight columns" id="content"> <!-- Open Content -->
         <!--Post Content-->
     </div> <!-- Close Content -->
     <div class="four columns" id="sidebar"> <!-- Open Sidebar -->
         <!--Sidebar Content-->
     </div> <!-- Close Sidebar -->
</div> <!-- Close row -->

我在 Google Chrome 控制台中对此进行了测试，它可以正常工作。