垂直对齐浮动div
垂直对齐浮动div
提问于 2009-06-20 23:30:25
我正在尝试浮动两个不同字体大小的div。我找不到在同一基线上对齐文本的方法。这是我一直在尝试的：
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>回答 3
Stack Overflow用户
发布于 2009-06-21 11:58:51
您可以使用line-height来实现这一点，但它只在内联元素上有效，并且如果文本不换行。
<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更改为span。如果你想保留div，只需在你的风格中添加display:inline即可。
<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>Stack Overflow用户
发布于 2009-06-20 23:50:41
你是指排版意义上的基线吗？(即，文本的每一行与另一列中的对应行相同)如果是这种情况，字体大小需要是彼此的倍数--例如，12和18px (1:1.5)。
如果您的意思是div需要相同的高度，那么没有一种简单的方法可以做到这一点。您可以手动设置一个高度( height :100px;)，或者使用javascript在另一个发生变化时对其进行调整。
或者，您可以通过将两个div封装在容器中，然后对容器应用模仿列外观的背景样式，将其设置为垂直重复，从而伪造相同的高度。这样一来，你就得到了假的列。要深入了解，请参阅此classic A List Apart article。
您的意思是，您有两段文本，并且都需要在列的底部？(对不起，现在还不能上传图片)
可以这样做的一种方法是使用上面的人造列方法。
另一种方法是在文本内部的自己的容器中设置文本。然后，将这两个绝对放置在列的底部...下面是一个很长的代码片段：
<!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>Stack Overflow用户
发布于 2009-06-20 23:34:25
如果你在HTML中把右边的浮动div放在左边的浮动div之前，它们就会垂直排列。
或者，您可以将div向左浮动-这是完全有效的-以及大多数CSS设计的编码方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1022795
复制相关文章
相似问题