Question

我有一个我正在通过学校参加竞赛的网站，我在清理浮动元素时遇到了问题。

该网站位于http://www.serbinprinting.com/corey/development/

我所指的区域是页面底部的成分列表。我希望它包含的div根据框中的内容调整其高度，但是我将要使用当前浮动的列，因此内容不会位于div的流中。

我尝试添加一个：after元素和clear：both和display：阻止列表以及它包含的div但没有成功。我可以实现两列布局而不浮动吗？我清楚地做了些什么吗？

以下是围绕该问题的代码......

HTML

<section id="monthly_recipe">
    <div class="content_container">
        <div class="centered">
            <img src="images/icons/bread41.png">
            <h1>Gluten-Free Bread That Doesn't Suck</h1>
        </div>
        <div class="col-1">
            <ul><a href="http://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.htmlhttp://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.html"></a>
                <li>4 cups Brown Rice Flour Blend   </li>
                <li>1 tablespoon xanthan gum</li>
                <li>1 tablespoon gluten-free egg replacer</li>
                <li>2 teaspoons salt</li>
                <li>½ cup powdered milk</li>
                <li>3 large eggs at room temperature</li>
                <li>¼ cup butter at room temperature</li>
                <li>2 teaspoons cider vinegar</li>
                <li>? cup honey</li>
                <li>1 package (2¼ teaspoons) active dry yeast (not INSTANT dry yeast)</li>
                <li>2 cups warm water</li>
            </ul>
        </div>
        <div class="col-2">
        </div>
    </div>
</section>

CSS

#welcome { 
    position: relative;
    width: 100%; min-height: 500px;
    background:url(../images/welcome.jpg); 
    background-size: cover; 
}

#welcome h1 {
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 4em;
    font-weight: lighter;
    font-family: 'Bitter', serif;
    text-transform: uppercase;
    margin: 60px 0 10px 0;
    padding: 5px 10px 5px 10px; 
}

#monthly_recipe {
    position: relative; left: 0;
    width: 100%; height: 500px;
    background: #fff; 
}

#monthly_recipe h1 {
    font-size: 4em; 
}

#monthly_recipe ul li {
    list-style: none;
    font-size: 1.5em;
    color: #333; 
}

Answer 1

误读了这个问题，我编辑了我的答案

删除固定高度，并使用以下规则将伪后类添加到#monthly_recipe：

#monthly_recipe:after {
    content: "";
    display: block;
    clear: both;
}

Answer 2

您似乎限制#monthly_recipe div显示完整列表，方法是给它一个500px的固定高度，

试试这个：

#monthly_recipe { position: relative; left: 0; width: 100%; background: #fff; }

Answer 3

我指的是你的网站。 sry，有很多错误你必须彻底参考html基础知识及其类，并使用css reset快速完成它。

无论如何使用：

col-1 { 向左飘浮 } col-2 { 向左飘浮 }

并参考clearfix。

对col-1和col-2 parent使用clearfix与另一个类[不在content-container]中。

清除浮动div（清除：两者;不工作）

3 个答案: