Question

我用WordPress创建了一个网站，我的文章中有浮动问题。

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

你有没有看到，当侧边栏完成时，内容会向左移动，我不希望这样。我希望内容始终在右边。我希望所有内容都低于另一个。

我的代码：

html（我的所有文章都在标签上：

<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

您可以在文章周围包装容器元素，并浮动容器而不是单个文章。给该文章容器一个特定的宽度，如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%;
}

请务必从文章中移除浮动内容，并观察拼写 - </article>上的结束标记拼写错误。

小提琴：http://jsfiddle.net/wwaxy073/1/

WordPress漂浮在文章中

1 个答案: