Question

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

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;

}

Answer 1

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

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

    </div>

</div>

请参阅jsfiddle

Answer 2

你的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。

Answer 3

你真的很不错，我只会改变你的＆＃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

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

3 个答案: