Question

看一下例子：

<td>
  <div id='a'></div>
  <div id='b'></div>
</td>

我希望div＃a浮动到左边，div #b浮动到右边，并且它们都垂直对齐。怎么做？

示例：https://usosweb.mimuw.edu.pl/kontroler.php?_action=actionx:katalog2/index（）使用其中一个输入文本，并查看自动完成程序的脚注。我希望获得类似的效果，但两个“列”都与MIDDLE垂直对齐（为此缺乏道歉）。

Answer 1

我认为这就是你要求的：我在这里做了一个演示：http://jsfiddle.net/RK2ak/

<div class="wrap">
<p id="a"> test</p>
<p id="b"> test</p>
</div>

#a{
    float:left;
}
#b{
    float:right;
}
.wrap{
    width:300px;
}

Answer 2

当你没有说出你实际想要做的事情时，很难回答。以下不好，但它回答了你的问题：

<div>
  <div id="a">a</div>
  <div id="b">b</div>
</div>

<style>
  div { width: 100px }
  #a{ background: red; float:left }
  #b{ background: blue; float:right }
</style>

修改

根据您的更新，您需要的是行高：

<div id="container"> <div id="a"> <p>lorem ipsum whatever</p> </div> <div id="b"> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> </div> </div> <style> #container { width: 500px } #a,#b{ display: block; float:left; width: 240px; background: red; line-height: 35px; height:35px } p{ line-height: 1em; display: inline-block; } </style>

This updated Fiddle说明了这个概念。基本上，容器需要height和line-height，因此height = line-height。

Answer 3

听起来你希望两个div都垂直居中，一个在左边，一个在右边。 CSS的垂直对齐一直很棘手，虽然现在有一些简单而优雅的解决方案，但它们最近才被引入，因此还不是很兼容。传统的替代方法是使用表格，但如果您知道<div>的高度，我们可以避免使用表格。

这是一个示例布局，假设#left和#right总是100px高，并将它们相对于文档正文对齐。（fiddle）

<强> HTML

<body>
  <div id='pad'></div>
  <div id='left'>left</div>
  <div id='right'>right</div>
</body>

<强> CSS

*      {margin:0; padding:0;}
body   {position:absolute; width:100%; height:100%;}
#pad   {height:50%; min-height:50px; margin-bottom:-50px;}
#left  {float:left;  width:100px; height:100px; background:#f88;}
#right {float:right; width:100px; height:100px; background:#88f;}

如何垂直对齐div或span，并将它们向相反的方向浮动？

3 个答案: