0

我通常可以通过使用 clearfix 样式来解决所有与浮动相关的问题，但我无法让这个工作。我尝试在右列中添加 clearfix 样式。我宁愿不使用单独的 clearfix div。

下面的屏幕截图应该可以说明问题：

http://min.us/leRsoGVqAQtbJ

HTML：

<div class="two-thirds left">

    <!-- Quotes -->
    <div class="notepad">
        <p class="quote">“I have worked [...]</p>
        <span class="who">- Clara Craftsman [...]</span>
    </div><!-- .notebook -->

</div><!-- .two-thirds -->

<div class="one-third right clearfix">
    p>This should be floating to the right of the notepad, but the Work Experience heading should be below.</p>
</div>

CSS：

/* Floates*/
.left { float:left; }
.right { float:right; }

/* Quotes */
.notepad,
.quote,
.who {
    display:block; 
    font-family:"Neucha",cursive;
    font-size:16px;
}
.notepad { 
    width:409px;
    padding-top:25px;
    margin-left:30px;
    background:url(../img/misc/notepad/notepad-top-big.png) no-repeat; 
}
.quote {
    width:315px; /* 409px total */
    padding:0 28px 24px 66px;
    background:url(../img/misc/notepad/notepad-middle-big.png) repeat-y;
}
.who { 
    width:315px; /* 409px total */
    padding:0 28px 48px 66px;
    background:url(../img/misc/notepad/notepad-bottom-big.png) no-repeat;
    text-align:right;
    font-style:italic;
    margin-top:-24px;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
4

2 回答 2

3

您不能将floatandclearfix应用于同一元素。

从这里，

当浮动元素在容器 box内时会出现问题，该元素不会自动强制容器的高度调整为浮动元素。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。

你应该clearfix这样应用：

<div class="clearfix">
    <div class="one-third right">
        <p>This should be floating...</p>
    </div>
</div>
于 2013-01-04T10:26:39.470 回答
2

这是一个不使用浮点数而是使用内联块的解决方案。看看这是不是你要找的——

演示

修改后的 css-

#wrapper 
{
   min-width:700px; 
}
.left,.right { display:inline-block; }
.left
{
    width:70%;
    min-width:420px;
}
.right
 {
    width:28%;
    min-width:170px;
 }
于 2013-01-04T10:24:34.213 回答