html - WordPress 在文章中 float

Question

我用 WordPress 创建了一个网站，但我的文章中出现 float 问题。

http://img4.hostingpics.net/thumbs/mini_756574Capturedcran20141013181858.png

你有没有看到，当侧边栏结束时，内容会向左移动，我不希望这样。我希望内容始终正确。我想要一个下面的所有内容。

我的代码:

html(我所有的文章都在a标签上:

<div id="container">
<aside id="sidebar" role="complementary">
code of the sidebar here...
</aside>
<article id="post-53" class="post-53 post type-post status-publish format-standard hentry category-non-classe">code of article here...</aticle>
</div>

CSS:

#container {
    width:100%;
    margin:0 auto;
    max-width:1000px;
    margin-top:-3%; 
}
aside{
    width:30%;
    text-align:left;
    max-width:280px;
    padding:2%;
    float:left;
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 0 0 rgba(0,0,0,0.1);
    box-shadow: 1px 1px 0 0 rgba(0,0,0,0.1);
    margin-left:5%;
    margin-top:2%;
    margin-bottom:2%;
    height: 100%;
}
article  {
    background-color: #fff;
    width:50%;
    height:100%;
    margin:1%;
    margin-top:2%;
    margin-left:4%;
    padding:2%;
    -webkit-box-shadow: 1px 1px 0 0 rgba(0,0,0,0.1);
    box-shadow: 1px 1px 0 0 rgba(0,0,0,0.1);
    max-width:550px;
    float:left;
}

谢谢你:)

Answer 1

您可以将容器元素包裹在您的文章周围，并 float 容器而不是单个文章。为该文章容器指定特定宽度，例如 48%(或其他)。只要你的旁边的宽度和文章容器的宽度，连同填充/边距，加起来等于或小于 100%，它们就会彼此相邻。所有元素都将留在容器内，而不是向左滑回。您现在遇到的问题是由于您的文章具有与 #container 相同的父元素 ( aside)。 .一旦有足够的元素向下推到一边，它们就会向左漂浮在它们的父容器 ( #container ) 上。

例如，您可以像这样在文章周围包裹一个 div:

<div id="container">
    <aside id="sidebar" role="complementary">code of the sidebar here...</aside>
    <div id="content-wrapper">
        <article id="post-53" class="post-53 post type-post status-publish format-standard hentry category-non-classe">code of article here...</article>
        <article id="post-54" class="post-54 post type-post status-publish format-standard hentry category-non-classe">code of article here...</article>
        <article id="post-55" class="post-55 post type-post status-publish format-standard hentry category-non-classe">code of article here...</article>
        <article id="post-56" class="post-56 post type-post status-publish format-standard hentry category-non-classe">code of article here...</article>
    </div>
</div>

然后在 CSS 中:

#content-wrapper {
    float:left;
    width: 48%;
    margin-left: 2%;
}

请务必从您的文章中删除 float ，并注意您的拼写 -- </article> 上的结束标记在您的 HTML 中拼写错误。

fiddle :http://jsfiddle.net/wwaxy073/1/