Fatal编程技术网
  • css/
  • Css 垂直对齐浮动div

Css 垂直对齐浮动div

css

Css 垂直对齐浮动div,css,Css,我试图浮动两个不同字体大小的div。我找不到在同一基线上对齐文本的方法。以下是我一直在尝试的： <div id="header"> <div id="left" style="float:left; font-size:40px;">BIG</div> <div id="right" style="float:right;">SMALL</div> </div> 大的 小的 如果在HTML中将右浮动div

我试图浮动两个不同字体大小的div。我找不到在同一基线上对齐文本的方法。以下是我一直在尝试的：

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>


大的
小的
如果在HTML中将右浮动div放在左浮动div之前，它们将垂直排列

或者，您可以将两个div都向左浮动-这是完全有效的-以及大多数CSS设计的编码方式。

好的，首先是纯CSS方式。您可以使用以下方法获得底部的垂直对齐：

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>


大的
小的
html，正文{边距：0；填充：0；}
#标题{位置：相对；高度：60px；}
#左{字体大小：40px；位置：绝对；左：0；底部：0；}
#右{位置：绝对；右：0；底部：0；}
您可能对此有一些问题，如IE6行为以及菜单之类的z索引问题（上次我尝试此操作时，我的菜单显示在绝对内容下）

此外，根据是否需要绝对定位所有元素，您可能需要开始执行一些操作，例如显式指定包含元素的高度，这通常是不需要的。理想情况下，您希望容器为其子容器自动调整大小

问题是不同大小字体的基线不匹配，我不知道有什么“纯”CSS方法可以做到这一点

但是，对于表，解决方案很简单：


大的
小的
#标题{宽度：100%；}
#标题td{垂直对齐：基线；}
#左{字体大小：40px；}
#右{文本对齐：右；}
试试看，你会发现它工作得很好

反桌人群会尖叫蓝色谋杀，但以上是最简单、最兼容浏览器的方式（特别是在需要IE6支持的情况下）

哦，而且总是喜欢使用类而不是内联CSS样式。

你是指排版意义上的基线吗？（也就是说，文本的每一行都与另一列中的对应行保持一致）如果是这种情况，字体大小需要是彼此的倍数——例如，12和18px（1:1.5）

如果你的意思是两个div的高度必须相同，那么没有一个简单的方法可以做到这一点。您可以手动设置高度（高度：100px；），或者使用javascript在其他更改时调整一个高度

或者，可以通过在容器中封闭两个div来模拟相同的高度，然后对容器应用一个模仿列外观的背景样式，将其设置为垂直重复。那样的话，你会得到人造的柱子。要深入了解，请参见此

你的意思是，你有两段文字，而且都需要在列的底部？（抱歉，目前无法发布图像）

可以这样做的一种方法是使用上面的Faux Columns方法

另一种方法是在文本内部的自己的容器中设置文本。然后，将两个位置绝对放置在柱的底部。。。这里有一个很长的片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css" media="screen">

        .col { width:200px; float:left;  }
        .short { height:200px; background:#eee; margin-bottom:20px; }
        .long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */  }

        #container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}


        #big, #small { position:absolute; bottom:0px; width:200px; }
        #big { height:100px; background:red; }
        #small { height:20px; background:green; right:0px; }



        </style>
    </head>
    <body>

    <div id="container">
        <div class="col long">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

        <div class="col short">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        </div>

        <div id="big" >BIG</div>

        <div id="small">small</div>

    </div>
    </body>
</html>


.col{width:200px；float:left；}
.short{高度：200px；背景：#eee；边距底部：20px；}
.long{背景：#ddd；边距底部：100px；/*边距等于#big*/}的高度
#容器{溢出：隐藏；宽度：400px；边距：0px自动；位置：相对；边框：1px纯绿色；}
#大，#小{位置：绝对；底部：0px；宽度：200px；}
#大{高度：100px；背景：红色；}
#小{高度：20px；背景：绿色；右侧：0px；}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
Lorem ipsum Door sit amet，为精英服务，为临时雇员提供服务
大的
小的
编辑只需重新阅读问题，并看到一个框需要向右浮动。。。所以下面的方法不起作用。。。但可能是适应性强的

首先，您应该使用span而不是div，因为内容将以内联方式完成。我不知道为什么，但这意味着你的元素在浏览器中的表现会更友好一些

一旦你做到了这一点，即使在ie6和IE7中，这也是一种享受：

#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora  fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}

<div id="header">
  <span id="left">BIG</span>
  <span id="right">SMALL</span>
</div>

#标题{高度：40px；行高：40px；}
#左，#右{display:-moz内联堆栈；display:inline块；垂直对齐：基线；宽度：auto；}/*double display属性用于修复ffx2*/
#左{字体大小：30px；}
#右{字体大小：20px；}
大的
小的
您可以使用行高来执行此操作，但它仅适用于内联元素和文本不换行的情况

<div id="header" style="overflow:hidden;">
    <span id="left" style="font-size:40px;">BIG</span>
    <span id="right" style="line-height:48px;">SMALL</span>
</div>
这并不能帮助他们在底线上比赛，这就是问题所在（我犯了同样的错误，直到我重读它）。我也有同样的想法！大体上也是如此。我更喜欢在容器上定义一个高度，而不是诉诸于表格，但我主要做的是web应用程序开发，整个臭烘烘的布局已经完全定位。我不希望IE6与之抗争，除非还有一大堆其他的废话：）如果你想与文本基线对齐，我看不出除了使用表之外你还能做什么。div中的事物从根本上来说过于独立，跨度不能随意对齐。当表格是错误的时候使用表格是错误的，当表格是正确的时候使用表格是正确的。然而，在我的书中，当它们是唯一有效的东西时使用它们是完全可以接受的。我更喜欢“垂直对齐：底部”我不知道你的意思，但18不是12的整数倍，相反，任何东西都是12的非整数倍。一些严重的 
<div id="header" style="overflow:hidden;">
    <span id="left" style="font-size:40px;">BIG</span>
    <span id="right" style="line-height:48px;">SMALL</span>
</div>

<div id="header" style="overflow:hidden;">
    <div id="left" style="font-size:40px;display:inline;">BIG</div>
    <div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>