中心其中一个兄弟divs

在下面，我想改变CSS，使right-sibling是真正集中在container股利。（编辑：不使用绝对定位）。中心其中一个兄弟divs

<html> 
    <head> 
    <style type='text/css'> 
     #container { 
     width: 500px; 
     } 
     #left-sibling { 
     float: left; 
     } 
     #right-sibling { 
     text-align: center; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='container'> 
     <div id='left-sibling'>Spam</div> 
     <div id='right-sibling'>Eggs</div> 
    </div> 
    </body> 
</html>

在目前的实现中，右兄弟的定心受左兄弟 - 您可以通过添加display: none到left-sibling的风格看到这一点。（注意：我想避免修改HTML结构，因为据我了解，CSS的全部重点是将标签结构从表示逻辑中分离出来，而且这看起来不像是一个非常疯狂的请求CSS处理。）

TIA。

来源

2008-12-05 cdleary

是否有任何理由不使用绝对定位，因为这将使它完全按照你的意愿去做？ – 2008-12-05 09:50:07

这是一个测试示例 - 在* real *页面中，我正在处理的这个页面嵌套在页面中，并且必须相对位于自动生成的内容中。绝对定位仅适用于不受未知流量影响的标题。 – cdleary 2008-12-05 10:03:20

你可以在#container中使用相对定位。如果你想得到一个体面的答案，那种信息也很重要。 – 2008-12-05 10:27:02

我只是用得到这个工作是一招在容器的左边有填充物，我们可以鼓励左边的兄弟坐在这个空间内，给它一个平等但负的边缘。

要完成图片，我们还在与左兄弟的宽度相同的容器右侧放置了填充。

<html> 
    <head> 
     <style type='text/css'>  
     #container { 
      width: 500px; 
      padding-left:50px; 
      padding-right:50px;  
      }  
     #left-sibling { 
      border: solid 1px #000; 
      float: left; 
      width:50px; 
      margin-left:-50px; 
     }  
     #right-sibling { 
      border: solid 1px #000; 
      text-align: center; 

     } 
     #container2 { 
      width: 500px; 
      } 
</style> 
    </head> 
    <body> 
     <div id='container'>  
      <div id='left-sibling'>Spam</div> 
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     <div id='container'> 
      <div id='left-sibling' style="display:none;">Spam</div>  
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     <div id='container2'> 
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     </body> 
</html>

来源

2008-12-05 11:38:27 rohancragg

您可以将float: left;更改为#left-sibling为position: absolute;。这将使其脱离正常流程，因此不会再影响右兄弟姐妹。

当然，这可能会对您的设计产生其他副作用。

来源

2008-12-05 09:20:14 Greg

好点 - 我会编辑问题来指定我想避免绝对定位。 – cdleary 2008-12-05 09:25:16

你应该总是设置一个宽度上浮动的元素，否则事情就变得怪异:)

如果你把

border: solid 1px #000;

规则上都申报单，你会看到发生了什么 - 在＃右兄弟div填充父div（#container）的整个宽度，所以虽然文本是实际上与中心对齐，但它看起来不是这样！

来源

2008-12-05 09:27:07

text-align属性控制应用属性的容器中内容的对齐方式。通过添加以下样式很容易看到：

#left-sibling { float: left; width:100px; border:1px Solid Blue; } 
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

我建议增加一个文档类型的文档，以避免怪异模式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

及以下样式：

#container { width: 500px; position:relative; border:1px Solid Black; } 
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; } 
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

你当然会想要调整兄弟姐妹的大小以适应您的需求。边界在展示真正发生的事情方面做得很好。

来源

2008-12-05 09:38:36 MadViking

尝试的宽度设置为左兄弟和平等的填充右：到右兄弟

像这样

<html> 
    <head> 
    <style type='text/css'> 
     #container { 
     width: 500px; 
     } 
     #left-sibling { 
     float: left; 
     width:50px; 
     } 
     #right-sibling { 
     text-align: center; 
     padding-right:50px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='container'> 
     <div id='left-sibling'>Spam</div> 
     <div id='right-sibling'>Eggs</div> 
    </div> 
    </body> 
</html>

来源

2008-12-05 09:59:26 adam

中心其中一个兄弟divs

回答

相关问题