Как выровнять 3 DIV рядом друг с другом?

Мне нужно создать 3 DIV в DIV контейнера нижнего колонтитула, которые выровнены по левому, среднему и правому краям. Все примеры CSS, которые я видел, используют float, как и я. Однако по какой-то причине DotNetNuke неправильно анализирует CSS. Я обнаружил, что левая панель перемещается правильно, но правая и средняя панели расположены сразу под ней, а не рядом с ней. Вот фрагмент из моего файла ascx:

<div id="footer">
<div id="footerleftpane" runat="server">
    <dnn:LOGO id="dnnLogo" runat="server" />
    <h3>Driving business performance.</h3>
    <h3>Practical Sales and Operations Planning</h3>
    <h3>for medium sized businesses.</h3>
</div>
<div id="footerRightPane" runat="server">
    <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
    <dnn:PRIVACY id="dnnPrivacy" runat="server" />
    <dnn:TERMS id="dnnTerms" runat="server" />
</div>
<div id="footerMidPane" runat="server">
</div> 
</div>

Вот соответствующая часть моего файла CSS:

#footer
{
width: 960px;
border: 1px;
}
#footerleftpane
{
width: 300px;
float: left;
}
#footerRightPane
{
width: 300px;
float: right;
}
#footerMidPane
{
padding:10px;
}

Какие изменения я должен сделать, чтобы достичь желаемого макета?

Обновление: я попытался предложить изменения, но макет все еще не работает, как видно на этой странице salesandoperationsplanning.net, которая демонстрирует то, что я хочу.

Источник

3 ответа

Решение

Прежде всего, вы должны нацелить имена элементов, которые появляются в вашем HTML. Похоже, ваша CMS добавляет какой-то префикс, а ваши идентификаторы не совпадают. (У вас есть #footerleftpane, но он отображается как #dnn_footerleftpane)

Кроме того, поскольку вы используете контейнер с фиксированной шириной, бесполезно создавать проблемы, не передавая ширину среднему контейнеру. Дайте ему ширину и посмотрите, работает ли он. Если этого не произойдет, вы можете попробовать еще два метода, если ваши блоки в правильном порядке источника (слева, в центре, справа).

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

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  width: 300px;
  float: left;
  ....
}

  2. Вы можете использовать display: inline-block, также удостоверившись, что он соответствует ширине и отступам контейнера

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  ....
  display: inline-block;
  ...
}
Источник

Это вопрос позиций, размеров и неправильных деклараций CSS.

1) позиция У вас есть средняя панель после правой в вашей странице источника!

2) размеры Я сделал быстрый тест, и вы можете исследовать дальше, но 300 пикселей это слишком много для ширины боковых панелей. Что-то в содержании, вероятно, изменяет ширину.

3) объявления css DotNetNuke (фактически все элементы управления ASP.Net делают) отображает элементы управления на стороне сервера (объявленные как runat="server"), присваивая им уникальный идентификатор, таким образом, то, что вы ожидаете, чтобы быть #footerleftpane в вашем css, будет #dnn_footerleftpane,

После изменения положения средней панели просто... в середине двух других, измените ваш CSS следующим образом:

    #footer
    {
        width: 960px;
        height: auto;
        margin:0;
        padding:0;
        border: 0;
    }

    #dnn_footerleftpane, #dnn_footerRightPane{
        width: 290px;
        float: left;
    }

    #dnn_footerMidPane
    {
        width: auto;
        float: left;
    }
Источник

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

Вычтите отступ, и средний элемент не может быть шире, чем 340 пикселей.

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​
Источник
Другие вопросы по тегам