CSS对齐问题
[英]CSS Alignment Problem
问题描述
I am trying to layout a header for a web site and I would like to have 4 containers in the header for dropping various user controls into. 
我正在尝试为网站布置标题，并且我希望在标题中具有4个容器，用于放入各种用户控件。
The 4 containers need to be positioned top left, top right, bottom left and bottom right inside the main the header container. 这4个容器需要在主标头容器的内部放置在左上方，右上方，左下方和右下方。
So far I can acheive this, the bit I can't do is that the bottom left and bottom right containers need to be aligned with the bottoms of their containers at the same level. 到目前为止，我能做到这一点，但我无法做到的是，左下方和右下方的容器需要与它们的容器的底部在同一高度对齐。
If I assign a height to #Bottom it works fine but I don't want to do this as I cannot predict what controls will be on the page and therefore won't know what height to set. 如果我将高度分配给#Bottom，则可以正常工作，但我不想这样做，因为我无法预测页面上将出现哪些控件，因此不知道要设置的高度。
It needs to work in IE7. 它需要在IE7中工作。
I hope that all makes sense. 我希望一切都有意义。
I have created a sample app to demonstrate the problem... 我创建了一个示例应用程序来演示该问题。
<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>
6 个解决方案
解决方案1
3 已采纳 2008-12-23 18:01:24
Sorry I can't be of more help, but I'm not sure this is possible given the constraints that you have. 抱歉，我无法提供更多帮助，但是由于您的限制，我不确定这是否有可能。 The main problem is that you want to align to the bottom of the bottom div, but since both bottomRight and bottomLeft are positioned absolute , the items overflow the bottom div. 主要问题是您想与bottom div的底部对齐，但是由于bottomRight和bottomLeft都位于absolute位置，因此项目会溢出bottom div。 Therefore, using the bottom property aligns them with their bottoms on the (empty) green line in your example. 因此，在示例中，使用bottom属性将其与（空）绿线上的bottom对齐。
The only think I can come up with requires you to know which of your two elements will be taller. 我想出的唯一想法要求您知道两个元素中哪个更高。 You don't have to know the specific height, but if you can predict which is taller and set it not to use position:absolute , then the container will function and the other (smaller) element will drop into place. 您不必知道特定的高度，但是如果您可以预测更高的高度并将其设置为不使用position:absolute ，则容器将起作用，而另一个（较小的）元素将放到适当的位置。 Given your example, if you know that bottomRight will be taller: 在您的示例中，如果您知道bottomRight会更高：
#bottomLeft
{
float:left;
border: 1px solid red;
position:absolute;
bottom:0;
}
#bottomRight
{
float:right;
border: 1px solid red;
}
If you don't know which will be taller ahead of time, I don't know what else you can do. 如果您不知道哪个会更高，我不知道您还能做什么。 You need some content inside the bottom div to give it the proper height, so that the " position: absolute; bottom: 0 " style will have the desired effect. 您需要在bottom div内添加一些内容以使其具有适当的高度，以便“ position: absolute; bottom: 0 ”样式具有所需的效果。
解决方案2
3 2008-12-23 18:29:37
As Adam said to have a pure CSS solution you would need to know which bottom div was going to have more text in it. 正如Adam所说的那样，您有一个纯粹的CSS解决方案，您需要知道哪个bottom div中将包含更多文本。
Below I have used javascript to check if bottomLeft has more content and then flip the styling if it does...try this below...and then try changing out so that bottomLeft has more content and then refresh. 在下面，我已经使用JavaScript来检查bottomLeft是否包含更多内容，然后翻转样式（如果这样做）...在下面尝试...然后尝试更改以使bottomLeft具有更多内容，然后刷新。 Hope this helps. 希望这可以帮助。
<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>
解决方案3
0 2008-12-23 17:06:43
Your positioning between bottomLeft and bottomRight is not consistent: 您在bottomLeft和bottomRight之间的位置不一致：
#bottomLeft
{
bottom:0;
}
#bottomRight
{
top:0;
}
If you want bottomLeft to behave like bottomRight , they should have the same vertical positioning. 如果希望bottomLeft的行为类似于bottomRight ，则它们应具有相同的垂直位置。 Or are they both wrong? 还是他们都错了？
解决方案4
0 2008-12-23 21:34:18
I might be reading this way wrong but why not do this. 我可能以这种方式读错了，但为什么不这样做。 *warning values need changed just concept: *警告值需要更改为仅概念：
CSS: 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: HTML：
<div id="header">
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
解决方案5
0 2008-12-24 08:59:17
Thanks everyone for your time. 谢谢大家的宝贵时间。
I have selected Adams answer as at the moment I can predict that the height of the bottom right container will be bigger than the bottom left so that would work. 我选择了Adams答案，因为目前我可以预测到，右下角容器的高度将大于左下角容器的高度，从而可以正常工作。
I also like the javascript solution from Jack. 我也喜欢Jack的javascript解决方案。
Ultimately I think I am trying to be too flexible here. 最终，我认为我想在这里变得太灵活。 Perhaps what I should be doing is having a series of user controls that define the various header layouts that are possible and then having one large bottom panel and dropping the relevant control in there. 也许我应该做的是拥有一系列用户控件，这些控件定义可能的各种页眉布局，然后有一个大的底部面板，并将相关控件放到那里。 Each of the series of user controls could then be layed out exactly as the content would be largely static. 然后，由于内容基本上是静态的，因此可以精确地布置一系列用户控件。
解决方案6
0 2009-01-05 12:02:20
When I have a layout issue I cannot solve in 1 hour I go back using tables. 当我遇到布局问题时，我无法在1个小时内解决问题，因此我会返回使用表格。 In your case using table would be a good solution because IMO it feels more stable than the other solutions. 在您的情况下，使用表格将是一个很好的解决方案，因为IMO比其他解决方案更稳定。
An other idea would be putting your top 2 divs in a container div, the bottom 2 divs in another container div and make one float left, the other right. 另一种想法是将顶部2个div放在一个容器div中，底部2个div放在另一个容器div中，然后向左浮动一个，向右浮动。 This way you do not have to use absolute positioning. 这样，您不必使用绝对定位。 (Make sure that the container has overflow:auto or if you want it to work in IE6 put an element with the style "clear: both" between the two divs and the containing div) （确保容器已溢出：自动，或者如果您希望它在IE6中工作，请在两个div和包含的div之间放置一个样式为“ clear：both”的元素）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.