html – 左右对齐在同一行

前端之家收集整理的这篇文章主要介绍了html – 左右对齐在同一行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想创建一个包含两个文本的标题的div.一个文本将被左对齐和一个右对齐.标题将有一个灰色的背景将扩展与文本:
  1. <div id="expand-Box">
  2. <div id="expand-Box-header">
  3. <span style="float: left;">Top left header</span>
  4. <span style="float: right;">Top right header</span>
  5. </div>
  6. Lorem ipsum dorem nori SEOta ostiy
  7. </div>
@H_404_4@CSS:

  1. #expand-Box
  2. {
  3. width: 100%;
  4. padding: 0;
  5. border: 2px solid #BBB;
  6. margin: 7px 0 0 0;
  7. }
  8.  
  9. #expand-Box-header
  10. {
  11. background-color: #BBB;
  12. margin: 0;
  13. color: #FFF;
  14. padding: 0 0 3px 2px;
  15. }
@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:

  1. <div id="expand-Box">
  2. <div id="expand-Box-header" class="clearfix">
  3. <span style="float: left;">Top left header</span>
  4. <span style="float: right;">Top right header</span>
  5. </div>
  6. <div id="expand_Box_sub_header">Lorem ipsum dorem nori SEOta ostiy</div>
  7. </div>
@H_404_4@CSS:

  1. #expand-Box {
  2. width: 100%;
  3. padding: 0;
  4. border: 2px solid #BBB;
  5. margin: 7px 0 0 0;}
  6.  
  7. #expand-Box-header {
  8. background-color: #BBB;
  9. margin: 0;
  10. color: #FFF;
  11. padding: 0 0 3px 2px;}
  12.  
  13. #expand_Box_sub_header { clear: both; }
  14.  
  15. .clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
  16. .clearfix{ display: inline-block;}
  17. html[xmlns] .clearfix { display: block;}
  18. * html .clearfix{ height: 1%;}
  19. .clearfix {display: block}
@H_404_4@溢出:http://jsfiddle.net/RL8ta/

@H_404_4@HTML:

  1. <div id="expand-Box">
  2. <div id="expand-Box-header">
  3. <span style="float: left;">Top left header</span>
  4. <span style="float: right;">Top right header</span>
  5. </div>
  6. <div id="expand_Box_sub_header">Lorem ipsum dorem nori SEOta ostiy</div>
  7. </div>
@H_404_4@CSS:

  1. #expand-Box {
  2. width: 100%;
  3. padding: 0;
  4. border: 2px solid #BBB;
  5. margin: 7px 0 0 0;}
  6.  
  7. #expand-Box-header {
  8. background-color: #BBB;
  9. margin: 0;
  10. color: #FFF;
  11. padding: 0 0 3px 2px;
  12. overflow: auto;}
  13.  
  14. #expand_Box_sub_header { clear: both; }

猜你在找的HTML相关文章