Question

我需要将一段文本“main”与另一段文本“sub”对齐，该文本向右伸出。我不希望两者都集中在一起。中心“主”，右边有“子”。它不需要在IE6中工作。我已经有了它的工作，但文本的底部没有正确排列。我应用了风格底部：.2em，这让它运作起来。但我想知道是否有更合理的方法来调整文本的底部。你可以在link text

来摆弄它

更新：如何摆脱“主”和“子”周围的填充？这可能有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{padding:0;margin:0}
.container{
 border:thin solid yellow;
 text-align:center;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
}
</style>
</head>
<body>
 <div class="container">
  <div class="main">
   Main
   <div class="sub">&nbsp;(Sub)</div>
  </div>
 </div>
</body>
</html>

Answer 1

放3个div

*{padding:0;margin:0}
.container{
 border:thin solid yellow;
 text-align:center;
}
.left{
float:left;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
float:left;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
float:left;
}

<div class="container">
  <div style="float:left">
  </div>
  <div class="main">
    Main  
  </div>
  <div class="sub">&nbsp;(Sub)</div>
</div>

在每个div中添加float：left。

中心向右推

1 个答案: