堆棧內存溢出
  簡體   English   中英

CSS對齊問題

[英]CSS Alignment Problem

 原文  2008-12-23 16:56:40  6   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