0

假设我有一个博客，我希望侧边栏向右浮动（固定宽度），滑块 + 左侧的内容不浮动（流动），并且侧边栏和滑块 + 内容之间有一点间隙。

所以为了实现这一点，我做了你会发现的事情。

问题是，我在内容中有一个浮动a标签，所以我clearfix在它的容器（article标签）上使用了一个。

但是突然之间，它article变得很大，并且随着我添加一些东西（.widgets例如更多）到.sidebar.

这是怎么回事？我怎样才能防止这种情况？如果我不能阻止这种行为，我怎样才能实现相同的流体 + 固定布局？

http://jsfiddle.net/wjVDX/

THE HTML
------------
<div class="container clearfix">
    <div class="slider">
    </div>
    <div class="sidebar">
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
    </div>
    <div class="content">
        <article class="clearfix">
            <a href="#"><img src="http://lorempixel.com/50/50/" alt="" /></a>
            <p>This is NOT what I want</p>
        </article>
    </div>
</div>

THE CSS
------------
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

img {
    max-width: 100%;
}

.container {
    width: 50%;
    margin: 0 auto;
    background-color: rgba(0,0,0,.2);
    position: relative;
    padding: 10px;
}

.slider {
    height: 50px;
    background: red;
    margin-right: 70px; /* 60px from the .sidebar + 10px margin */
}

.sidebar {
    width: 60px;
    background: blue;
    float: right;
    position: relative;
    top: -50px; /* Height of .slider */
    margin-bottom: -50px; /* To compensate for the position: relative; */
}

.widget {
    background: yellow;
    height: 30px;
    margin-bottom: 5px;
}

.content {
    background: green;
    margin-right: 70px; /* 60px from the .sidebar + 10px margin */
}

.content article {
    background: pink;
}

.content article a {
    display: block;
    float: left;
    margin-right: 5px;
}

.content article p {
    line-height: 20px;
    background: brown;
}
4

1 回答 1

0

正如您在此JSFiddle中看到的，添加

overflow:hidden;

到 .content 应该做你要求的。

编辑：草坪人有它。

于 2013-06-02T17:57:21.770 回答