Question

编辑：这个问题是关于与基线对齐。意思是角色的基础（角色的底部＆＃39; h＆＃39;）。当包含2种不同字体大小的文本时，可以将它们与基线div对齐。我找不到任何解决方案来对齐互联网上的基线网格。他们都很臭。没有Javascript框架或css预处理器。如果已知基线下方的字体比例，则没有意义。

对于下面链接的代码：将.text2字体大小更改为22px，并观察两个文本组不再在基线处对齐（＆＃39; h＆＃39;的底部）。将其更改回32 px并将它们对齐。鉴于.bottomalign类具有em单位，两种字体都是arial，而em指的是字体大小，即＆＃39; j＆＃39;在两个文本组中都是一个相同的比例，所以如果你没有答案，任何想法为什么它都会与大天才结合。如果没有人知道，那将会给予赏金。

http://jsfiddle.net/FX5zq/

的CSS：

.bottomalign
{
  position: absolute;
  float: left;
  bottom: -.24em;
}

.container
{
  position: relative;
  height: 50px;
  overflow: visible;
}

div
{
  font-family: arial;
}

.text1
{
  font-size: 16px;
}

.text2
{
  font-size: 32px;
  margin-left: 2px;
  color: green;
}

HTML：

 <div class="container">

      <div class="bottomalign text1">jh</div>
      <div class="bottomalign text2">jh</div>

 </div>

enter image description here

Answer 1

我的建议是将div设置为display: inline-block; vertical-align: baseline;。这样，无论大小如何，它们都会根据您的需要进行对齐。 http://codepen.io/pageaffairs/pen/ucyIt

编辑：第二个选项，在说明中提到： http://codepen.io/pageaffairs/pen/jBcxk

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

body {
    font-family: arial;
}

.container div {
    display: inline-block; 
    vertical-align: baseline;
}

.text1 {
    font-size: 16px;
}

.text2 {
    font-size: 32px;
    color: green;
    margin-left: 2px;
}

</style>
</head>
<body>

<div class="container">
    <div class="text1">jh</div>
    <div class="text2">jh</div>
</div>

</body>
</html>

Answer 2

原因是默认行高在不同浏览器之间有所不同：mozilla约为1.2，因此要使上面的代码工作，需要重置行高：

.bottomalign
{
  position: absolute;
  bottom: -.17em; //arial descends 17% below baseline
  line-height: 1;
}

阅读http://meyerweb.com/eric/css/inline-format.html

Answer 3

这是一个javascript代码，它将动态调整两个div。如果您正在寻找仅基于CSS的答案，请忽略：

你必须删除＆＃34;底部：-.24em;＆＃34;来自bottomalign类并使用以下脚本标记

document.getElementsByClassName（＆＃34; bottomalign text1＆＃34;）[0] .style.top = document.getElementsByClassName（＆＃34; bottomalign text2＆＃34;）[0] .clientHeight - document.getElementsByClassName（＆＃34; bottomalign text1＆＃34;）[0] .clientHeight - 1 +＆＃39; px＆＃39;;

以下代码：

<html>
<head>
<style>
.bottomalign
{
  position: absolute;
  float: left;

}

.container
{
  position: relative;
  height: 50px;
  overflow: visible;
}

div
{
  font-family: arial;
}

.text1
{
  font-size: 16px;
}

.text2
{
  font-size: 32px;
  margin-left: 2px;
  color: green;
}
</style>
</head>
<body>
<div class="container">

      <div class="bottomalign text1">jh</div>
      <div class="bottomalign text2">jh</div>
    <script language="javascript"> document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")

[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px'; </script>
 </div>
</body>
</html>

Answer 4

我已经找到了一些东西，并且非常有兴趣知道这是否是您正在寻找的。

TL：DR; 这是fiddle

我所做的是利用display: table-cell;。使用您的HTML，我使用了以下CSS：

.bottomalign {
    display: table-cell;
}
.container {
    position: relative;
    height: 50px;
    overflow: visible;
    display: table;
}
div {
    font-family: arial;
}
.text1 {
    font-size: 16px;
}
.text2 {
    font-size: 32px;
    color: green;
}

我为容器添加了display: table;和bottomalign display: table-cell;

如果您正在寻找，请告诉我。

Answer 5

您现在可以使用display: flex和align-self: flex-end：

执行此操作

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 24em;
}

.bottom-align {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    -ms-align-self: flex-end;
    -o-align-self: flex-end;
    align-self: flex-end;
}

.text-1 {
    font-size: 1em;
}

.text-2 {
    font-size: 2em;
}

我有updated your solution。

请注意，flexbox规范仍在更改，您现在必须使用前缀，除非您使用autoprefixer之类的工具。

与基线网格css对齐

5 个答案: