堆栈内存溢出
  繁体   English   中英

CSS对齐问题

[英]CSS Alignment Problem

 原文  2008-12-23 16:56:40  8   6    css/ internet-explorer

问题描述

我正在尝试为网站布置标题，并且我希望在标题中具有4个容器，用于放入各种用户控件。

这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>

6 个解决方案

解决方案1
 3 已采纳  2008-12-23 18:01:24

抱歉，我无法提供更多帮助，但是由于您的限制，我不确定这是否有可能。 主要问题是您想与bottom div的底部对齐，但是由于bottomRight和bottomLeft都位于absolute位置，因此项目会溢出bottom div。 因此，在示例中，使用bottom属性将其与（空）绿线上的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 ”样式具有所需的效果。

解决方案2
 3  2008-12-23 18:29:37

正如Adam所说的那样，您有一个纯粹的CSS解决方案，您需要知道哪个bottom 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>

解决方案3
 0  2008-12-23 17:06:43

您在bottomLeft和bottomRight之间的位置不一致： 

#bottomLeft
{
    bottom:0;
}

#bottomRight
{
    top:0;
}

如果希望bottomLeft的行为类似于bottomRight ，则它们应具有相同的垂直位置。 还是他们都错了？

解决方案4
 0  2008-12-23 21:34:18

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

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>

解决方案5
 0  2008-12-24 08:59:17

谢谢大家的宝贵时间。

我选择了Adams答案，因为目前我可以预测到，右下角容器的高度将大于左下角容器的高度，从而可以正常工作。

我也喜欢Jack的javascript解决方案。

最终，我认为我想在这里变得太灵活。 也许我应该做的是拥有一系列用户控件，这些控件定义可能的各种页眉布局，然后有一个大的底部面板，并将相关控件放到那里。 然后，由于内容基本上是静态的，因此可以精确地布置一系列用户控件。

解决方案6
 0  2009-01-05 12:02:20

当我遇到布局问题时，我无法在1个小时内解决问题，因此我会返回使用表格。 在您的情况下，使用表格将是一个很好的解决方案，因为IMO比其他解决方案更稳定。

另一种想法是将顶部2个div放在一个容器div中，底部2个div放在另一个容器div中，然后向左浮动一个，向右浮动。 这样，您不必使用绝对定位。 （确保容器已溢出：自动，或者如果您希望它在IE6中工作，请在两个div和包含的div之间放置一个样式为“ clear：both”的元素）

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS 垂直 alignment 问题 字段 alignment 问题 Css CSS对齐问题 CSS和Javascript垂直对齐问题 IE7中的CSS对齐问题 Google Chrome的CSS对齐问题 IE中的CSS按钮对齐问题 问题点 alignment in css 具有列表项和文本区域的CSS垂直对齐问题 选中时复选框对齐问题 - HTML/CSS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM