div不会出现在另一个div里面

时间:2015-05-01 19:19:02

标签: html css

我试图让两个div在另一个div中并排坐着,但是第一个div不会出现在容器div中。 " contactleft"不会出现在" contactcont"内部。我不确定它是否与显示有关:阻止与否?我试着清除"左边"一个也没有运气。有谁知道什么?谢谢!

HTML:

<div id="contact">
    <img src="Images/contactbanner.jpg" alt="contactbanner">

</div>

<div id="contactcont">
    <div id="contleft">

    </div>

</div>

CSS:

#contactleft {

    float:left;
    display:block;

    background-color:red;
    width:100px;
    height:300px;

}

#contactcont {
    display:block;
    clear:both;
    background-color:blue;
    height:350px;
    width:960px;
    margin-left:auto;
    Margin-right:auto;

}

3 个答案:

答案 0 :(得分:0)

我认为您的代码中存在拼写错误。应该正常使用以下内容:

<div id="contactcont">
    <div id="contactleft">

    </div>

</div>

请参阅jsfiddle

答案 1 :(得分:0)

你的CSS中有contleft的拼写错误:

#contleft {

    float:left;
    display:block;

    background-color:red;
    width:100px;
    height:300px;

}

您的HTML看起来不错:

<div id="contactcont">
    <div id="contleft">
        inner content here
    </div>
</div>

以下是显示该内容的fiddle

答案 2 :(得分:0)

你真的很不错,我只会改变你的&#34; contactLeft&#34;到一个班级,并重复&#34; contactLeft&#34;你需要的次数。这是指向CodePen的链接。

Link to CodePen

以下是HTML:                   

<div id="contactCont">
  <p>contact Container</p>
    <div class="contleft">
      <p>contact Left</p>
    </div>
    <div class="contleft">
      <p>contact Left</p>
    </div>
</div>

这就是CSS:

.contleft {
    float:left;
    display:block;
    background-color:red;
    width:100px;
    height:300px;
    border: 1px solid black;
    margin-left:1px;
}

#contactCont {
    display:block;
    clear:both;
    background-color:blue;
    height:350px;
    width:960px;
    margin-left:auto;
    Margin-right:auto;

}

注意,我将横幅高度更改为20px并拉伸了屏幕宽度。 然后我就复制了你的第二个&#34; div&#34;在同一层次结构中的容器内部并排添加另一个容器。我添加了1px的margin-left和1px纯黑色边框来夸大这一点。

如果您对此不熟悉,您还可以参考一些响应式sizings的bootstrap,直到您更多地了解CSS和HTML元素。 Get BootStrap