CSS对齐问题

我想布局一个网站的标题，我想在标题中有4个容器放入各种用户控件。CSS对齐问题

4个容器需要位于标题容器主体内的左上角，右上角，左下角和右下角。

到目前为止，我可以实现这一点，我不能做的是，左下角和右下角的容器需要在同一水平上与其容器的底部对齐。

如果我给#Bottom指定高度，它可以正常工作，但我不想这样做，因为我无法预测页面上的控件是什么，因此不知道要设置的高度。

它需要在IE7中工作。

我希望一切都有道理。

我创建了一个示例应用来说明这个问题...

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 

    .clearFloats 
    { 
     clear:both; 
    } 

    #topLeft 
    { 
     float:left; 
     border: 1px solid blue; 
     height:50px; 
    } 

    #topRight 
    { 
     float:right; 
     border: 1px solid blue; 
     height:50px; 
    } 

    #bottom 
    { 
     position:relative; 
     border: 1px solid green; 
    } 

    #bottomLeft 
    { 
     float:left; 
     border: 1px solid red; 
     position:absolute; 
     top:0; 
    } 

    #bottomRight 
    { 
     float:right; 
     border: 1px solid red; 
     position:absolute; 
     top:0; 
     right:0; 
    } 

    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="topLeft">top left</div> 
     <div id="topRight">top right</div> 
     <div class="clearFloats" /> 
     <div id="bottom"> 
      <div id="bottomLeft">bottom left</div> 
      <div id="bottomRight">bottom right<br />Some content<br />some more content</div> 
      <div class="clearFloats" /> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

来源

2008-12-23 Simon Keep

这里是输出... http://www.flickr.com/photos/skeep/3130590397/ – 2008-12-23 17:25:41

我正在努力实现这一目标...... http://www.flickr.com/photos/skeep/3131426012/ – 2008-12-23 17:28:03

对不起，我不能有更多的帮助，但我不确定这是可能的，因为你有限制。主要的问题是你想对齐到bottom div的底部，但由于bottomRight和bottomLeft都位于absolute，因此这些项溢出了bottom div。因此，使用bottom属性将它们与其示例中的（空）绿线上的底部对齐。

唯一想到我能想出的要求你知道哪两个元素会更高。您不必知道具体高度，但如果您可以预测哪个高度更高，并且将其设置为而不是以使用position:absolute，那么容器将起作用，另一个（较小）元件将落入位置。鉴于你的例子，如果你知道bottomRight会更高：

#bottomLeft 
{ 
    float:left; 
    border: 1px solid red; 
    position:absolute; 
    bottom:0; 
} 

#bottomRight 
{ 
    float:right; 
    border: 1px solid red; 
}

如果你不知道这将是一次高吧，我不知道你能做些什么。你需要一些里面的bottom div内容给它适当的高度，以便“position: absolute; bottom: 0”风格会产生预期的效果。

来源

2008-12-23 18:01:24

你bottomLeft和bottomRight之间的定位并不一致：

#bottomLeft 
{ 
    bottom:0; 
} 

#bottomRight 
{ 
    top:0; 
}

如果你想bottomLeft表现得像bottomRight，他们应该有相同的垂直位置。或者他们都错了？

来源

2008-12-23 17:06:43

道歉，你是对的他们都应该是顶级的，但是这仍然不能解决问题。我将编辑代码。谢谢。 – 2008-12-23 17:10:26

由于亚当说，有一个纯粹的CSS解决方案，你需要知道哪个底部div将有更多的文字。

下面我用javascript来检查bottomLeft是否有更多的内容，然后翻转样式，如果它...尝试下面的...然后尝试更改，以便bottomLeft有更多的内容，然后刷新。希望这可以帮助。

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 

    .clearFloats 
    { 
     clear:both; 
    } 

    #topLeft 
    { 
     float:left; 
     border: 1px solid blue; 
     height:50px; 
    } 

    #topRight 
    { 
     float:right; 
     border: 1px solid blue; 
     height:50px; 
    } 

    #bottom 
    { 
     width:100%; 
     border: 1px solid green; 
     position:relative; 
    } 


    #bottomLeft 
    { 
     float:left; 
     border: 1px solid red; 
     position:absolute; 
     bottom:0; 
    } 

    #bottomRight 
    { 
     float:right; 
     border: 1px solid red; 
    } 

    </style> 
</head> 
<script type="text/javascript"> 

    window.onload = function() { 
     var leftBot = document.getElementById('bottomLeft'); 
     var rightBot = document.getElementById('bottomRight'); 
     //if the left is actually bigger than swap out their styling 
     if (leftBot.innerHTML.length > rightBot.innerHTML.length) { 
      leftBot.style.position='static'; 
      rightBot.style.position='absolute'; 
      rightBot.style.bottom = 0; 
      rightBot.style.right = 0; 
     } 
    } 

</script> 

<body > 
    <form id="form1" runat="server"> 
    <div id="header"> 
     <div id="top"> 
      <div id="topLeft">top left</div> 
      <div id="topRight">top right</div> 
     </div> 
     <div class="clearFloats" /> 
     <div id="bottom"> 
       <div id="bottomLeft">bottom left</div> 
       <div id="bottomRight">bottom right<br />Some content<br />some more content<br/><br/>more more</div> 
       <div class="clearFloats" /> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

来源

2008-12-23 18:29:37 Jack

我可能会读这种方式错了，但为什么不这样做。 *警告值需要改变只是概念：

CSS：

#header{ 
    height:150px; 
    width:350px; 
    position:relative; 
} 
#header #topleft{ 
    position:absolute; 
    top:0; 
    left:0; 
} 
#header #topright{ 
    position:absolute; 
    top:0; 
    right:0; 
} 
#header #bottomleft{ 
    position:absolute; 
    left:0; 
    bottom:0; 
} 
#header #bottomright{ 
    position:absolute; 
    right:0; 
    bottom:0; 
}

HTML：

<div id="header"> 
<div id="topleft"></div> 
<div id="topright"></div> 
<div id="bottomleft"></div> 
<div id="bottomright"></div> 
</div>

来源

2008-12-23 21:34:18 pixeldev

谢谢大家对你的时间。

我已经选择了亚当斯答案，因为此刻我可以预测右下方容器的高度会比左下方更大，以便能够正常工作。

我也喜欢杰克的JavaScript解决方案。

最终我认为我在这里试图过于灵活。也许我应该做的是有一系列的用户控件，它们定义了可能的各种页眉布局，然后有一个大的底部面板并放下相关的控件。然后，系列用户控件中的每一个都可以精确地放置，因为内容基本上是静态的。

来源

2008-12-24 08:59:17

当我有一个布局问题，我不能在1小时内解决我回去使用表格。在你的情况下使用表将是一个很好的解决方案，因为IMO感觉比其他解决方案更稳定。

另一个想法是将您的顶部2个div放入一个容器div中，将另一个容器div中的底部2个div放到另一个容器div中，另一个放在另一个容器div中，另一个放在右边。这样你就不必使用绝对定位。（确保容器溢出：自动或者如果你想它在IE6中工作，把两个div和包含div之间的样式为“clear：both”的元素）

来源

2009-01-05 12:02:20 Germstorm

CSS对齐问题

回答

相关问题