0

我在 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>

谁能给我一些建议，告诉我如何让正确的列正确对齐，而不必正确对齐文本？

感谢您的时间！

~诺艾尔

4

3 回答 3

1

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

于 2012-07-25T18:02:37.880 回答
0

从 div#cbcstuff 中删除“clear: both”

于 2012-07-25T18:03:25.477 回答
0

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

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

通过说明两者，您是在告诉它每一边都不允许其他浮动元素，因此将其发送到“容器”div 的下方和外部

CSS 清除属性

于 2012-07-25T18:09:16.870 回答