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

我有一个网站，我正在通过学校竞争，我有清理浮动元素的问题。清除浮动div（清除：两个;不工作）

该网站是在http://www.serbinprinting.com/corey/development/

我指的是该地区举办朝向页面的底部配料表。我希望它包含的div根据框中的内容调整其高度，但是我将不得不使用当前浮动的列，因此内容不在div的流中。

我已经尝试添加一个：清除元素后：两个和显示：块列表以及它包含在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; 
}

来源

2015-11-17 Cory B.

首先，您的文档类型不正确，并引发您的怪癖。你错过了感叹号：<！DOCTYPE html> – Rob

误读的问题，我编辑我的答案

取下固定高度，并添加：这些规则伪类后，您#monthly_recipe：

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

来源

2015-11-17 13:34:12 Iecya

谢谢，这真的有帮助。我只是没有看到固定的高度是相当诚实的。一定是俯视它。无论如何，非常感谢！ –

看来你是从显示的完整清单给它一个固定的高度限制#monthly_recipe DIV的500像素，

试试这个：

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

来源

2015-11-17 13:40:46 KnvpBE

-1

我refered乌尔网站。 sry，有很多错误必须彻底引用html基础知识和它的类，并使用css reset来快速和正确地完成它。

无论如何使用：

COL-1 { 浮动：左 } COL-2 { 浮动：左 }

和参考clearfix。

对另一个类[不在content-container]中使用clearfix作为col-1和col-2父级。

来源

2015-11-17 14:19:23

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

回答

相关问题