我想创建一个包含两个文本的标题的div.一个文本将被左对齐和一个右对齐.标题将有一个灰色的背景将扩展与文本:
@H_404_4@CSS:
@H_404_4@虽然这样做,两个跨度浮在扩展箱头灰色背景上,Lorem Ipsum文本比它应该更高.
解决方法
您的代码不工作的原因是因为浮动div不影响周围元素的大小.在左侧的float中,内嵌块所遇到的问题是当屏幕变小时,会丢失一个标题.我缩小了JSfiddle Mehmet Eren Yener提供的屏幕尺寸,右边的标题消失了.如果您的标题长,并且屏幕很小 – 右标题将消失.
@H_404_4@我认为更好的方法是使用clearfix类或使用overflow标签.还有空的Div方法 – 但我并不是那个粉丝.如果您使用这些方法之一,而当它们太靠近时,左标题将堆叠在右标题的顶部.
@H_404_4@以下是使用Clearfix和Overflow的示例:
@H_404_4@清除:http://jsfiddle.net/ATP33/
@H_404_4@HTML:
@H_404_4@CSS:
@H_404_4@溢出:http://jsfiddle.net/RL8ta/ @H_404_4@HTML:
- #expand-Box {
- width: 100%;
- padding: 0;
- border: 2px solid #BBB;
- margin: 7px 0 0 0;}
- #expand-Box-header {
- background-color: #BBB;
- margin: 0;
- color: #FFF;
- padding: 0 0 3px 2px;}
- #expand_Box_sub_header { clear: both; }
- .clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
- .clearfix{ display: inline-block;}
- html[xmlns] .clearfix { display: block;}
- * html .clearfix{ height: 1%;}
- .clearfix {display: block}
@H_404_4@CSS: