Html расположение нескольких блоков - PullRequest
Новая
       22

Html расположение нескольких блоков

1 голос
/ 26 апреля 2020

У меня есть нижний колонтитул, который я хочу расположить снизу. Вот мой код, но он не работает. Пролеты не совпадают в одной строке. Я также пробовал показ: встроенный. Но когда я это делаю, пролеты не располагаются слева, в центре и справа. Пожалуйста, помогите мне . 

<div style="background-color:grey;width:100%;position:fixed;bottom:0px;">
            <div style="text-align:left;margin-left:10px;">
                <span>Site Developer: Mahan Lameie</span>
            </div>
            <div style="text-align:center;">
                <span>Copyright© 2020 Mahan Lameie</span>
            </div>
            <div style="text-align:right;margin-right:10px;">
                <span>E-mail:mahan.lameie87@gmail.com</span>
            </div>
</div>

Ответы [ 2 ]

1 голос
/ 26 апреля 2020 
<div class="footer" style="background-color:grey;width:100%;position:fixed;bottom:0px;">
            <div style="text-align:left;margin-left:10px;">
                <span>Site Developer: Mahan Lameie</span>
            </div>
            <div style="text-align:center;">
                <span>Copyright© 2020 Mahan Lameie</span>
            </div>
            <div style="text-align:right;margin-right:10px;">
                <span>E-mail:mahan.lameie87@gmail.com</span>
            </div>
</div>

CSS: 

.footer {
  display : flex;
}

.footer div{
flex-grow : 1
}

Я добавляю класс нижнего колонтитула и добавляю некоторый стиль для этого класса.

0 голосов
/ 26 апреля 2020

Хорошим способом было бы использовать flexbox, чтобы выровнять элементы в ряд. Вот пример, где я добавил display: flex; к вашему упаковочному элементу, а затем добавил flex-grow: 1; к каждому элементу, чтобы определить способность расти и занимать равную ширину. 

<div style="background-color:grey;width:100%;position:fixed;bottom:0px; display: flex; ">
    <div style="flex-grow: 1; text-align:left;margin-left:10px;">
        <span>Site Developer: Mahan Lameie</span>
    </div>
    <div style="flex-grow: 1; text-align:center;">
        <span>Copyright© 2020 Mahan Lameie</span>
    </div>
    <div style="flex-grow: 1; text-align:right;margin-right:10px;">
        <span>E-mail:mahan.lameie87@gmail.com</span>
    </div>
</div>
...