Проблема выравнивания CSS - PullRequest
Новая
       27

Проблема выравнивания CSS

2 голосов
/ 23 декабря 2008

Я пытаюсь создать макет заголовка для веб-сайта, и я хотел бы иметь 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 ]

3 голосов
/ 23 декабря 2008

Как сказал Адам, чтобы иметь чистое 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>
3 голосов
/ 23 декабря 2008

Извините, я не могу больше помочь, но я не уверен, что это возможно, учитывая ваши ограничения. Основная проблема заключается в том, что вы хотите выровнять по низу 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" имел желаемый эффект.

0 голосов
/ 05 января 2009

Когда у меня возникает проблема с макетом, я не могу решить ее в течение 1 часа, я возвращаюсь с помощью таблиц. В вашем случае использование таблицы было бы хорошим решением, потому что IMO чувствует себя более стабильно, чем другие решения.

Другой идеей было бы поместить ваши верхние 2 div в контейнерный div, нижние 2 div в другой контейнерный div и сделать один float левым, а другой правым. Таким образом, вам не нужно использовать абсолютное позиционирование. (Убедитесь, что контейнер переполнен: auto или если вы хотите, чтобы он работал в IE6, поместите элемент со стилем «clear: both» между двумя div и содержащими div)

0 голосов
/ 24 декабря 2008

Спасибо всем за ваше время.

Я выбрал ответ Адамса, так как на данный момент могу предсказать, что высота нижнего правого контейнера будет больше, чем нижнего левого, чтобы это работало.

Мне также нравится решение javascript от Джека.

В конечном счете, я думаю, что пытаюсь быть здесь слишком гибким. Возможно, что я должен делать, это иметь ряд пользовательских элементов управления, которые определяют различные возможные варианты расположения заголовков, а затем иметь одну большую нижнюю панель и помещать туда соответствующий элемент управления. Каждая из серий пользовательских элементов управления может быть размещена в точности так, как содержимое будет в основном статичным.

0 голосов
/ 24 декабря 2008

Я мог бы читать это неправильно, но почему бы не сделать это. * Значения предупреждения должны быть изменены только концепция:

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>
0 голосов
/ 23 декабря 2008

Ваше позиционирование между bottomLeft и bottomRight не соответствует: 

#bottomLeft
{
    bottom:0;
}

#bottomRight
{
    top:0;
}

Если вы хотите, чтобы bottomLeft вел себя как bottomRight, они должны иметь одинаковое вертикальное положение. Или они оба не правы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...