我试图让两个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;
}
答案 0 :(得分:0)
答案 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的链接。
以下是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