Question

我在div中遇到了一些子元素的问题。父div是标题，理论上它应该包含一个三列标题。左侧列为幻灯片，中间为20px分隔线，右侧为信息文本。

我遇到的问题是，我似乎能够让正确的列保持内联的唯一方法是告诉文本正确对齐，但这在美学上不起作用，因为我需要文本居中。

我想告诉DIV向右浮动，但是当我这样做时，div总是进入下一行而不是浮动在头部div中。以下是该问题的示例（http://cbchaverhill.onedirectionconnection.com/），请忽略除标题之外的所有内容（尚未开始处理这些元素）。

这是我的CSS：

div#header {
clear: both;
height: 300px;  
width: 900px;
margin-top: 0px;
padding: 0px;
border: 0px;
}

div#slide {
float: left;
clear: both;
height: 300px;
width: 590px;
margin-top: 0px;
padding: 0px;
border: 0px;
background: #FFFFFF;
}

div#divide {

 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 overflow: hidden;
 width: 20px;
 height: 300px;
 float: left;
 background: url(/wp-content/themes/cbc/divide.png) no-repeat;

}

div#cbcstuff{
display:  inline-block;
float: right;
clear: both;
height: 300px;
width: 290px;
margin-top: 0px;
padding: 0px;
border: 0px;
background: #FFFFFF;
}

以下是标题的编码：

<div id="header">

<div id="slide"></div>
<div id="divide"></div>

<div id="cbcstuff">
Calvary Baptist Church<br>
Haverhill, MA 01832
</div>

</div>

任何人都可以给我一些建议，告诉我如何才能让正确的列正确对齐，而不必正确对齐文本？

感谢您的时间！

〜诺勒

Answer 1

尝试删除clear: both;和div#slide中的div#cbcstuff。使用该命令，可以清除浮动样式。

Answer 2

从div＃cbcstuff

中删除“clear：both”

Answer 3

明确：两者;是这里问题的原因。

clear属性指定不允许其他浮动元素的元素的哪一边。

通过声明你告诉它两侧都不允许其他浮动元素，因此将它发送到“容器”div之下和之外

CSS clear property

Child Div出现在新线上

3 个答案: