Как разместить два элемента рядом друг с другом, чтобы они заполнили доступное пространство - PullRequest
Новая
       1

Как разместить два элемента рядом друг с другом, чтобы они заполнили доступное пространство

6 голосов
/ 09 февраля 2011

У меня есть два деления, правый имеет ширину 80 пикселей, другой должен заполнить оставшееся пространство.До сих пор я пытался: 

<!DOCTYPE html>

<html>
<head>
    <title>#{get 'title' /}</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #left {
            position: relative;
            margin-right: 80px;
            background-color: red;
        }

        #right {
            float: right;
            position: relative;
            text-align: left;
            width: 80px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="left">
    Left
</div>
<div id="right">
    Right
</div>
</body>
</html>

Тем не менее, правая коробка всегда ставится ниже левой, а не справа от нее.Я думаю, это из-за наценки.Я также попробовал поле слева: -80px справа, но это ничего не меняет.Так как мне изменить CSS так, чтобы правый div находился в той же строке, что и левый div?

Ответы [ 5 ]

13 голосов
/ 09 февраля 2011

Имеют право div перед левым. 

<div id="right">
    Right
</div>
<div id="left">
    Left
</div>

Рабочий пример

3 голосов
/ 13 августа 2012

В качестве альтернативы, если вы хотите, чтобы элемент LEFT оставался на статической ширине, а элемент RIGHT - для расширения и сжатия с размером страницы, вы использовали бы следующий код: 

.left {
    float: left;
    position: relative;
    width: 80px;
    background-color: red;
}

.right {
    position: relative;
    text-align: left;
    margin-left: 80px;
    background-color: yellow;
}

И HTML будет ... 

<div class="left">Left</div>
<div class="right">Right</div>
2 голосов
/ 09 февраля 2011

Это потому, что div является блочным элементом, то есть он всегда нарушает поток. То, что вы можете сделать, это изменить оба * div 100 * на inline и float на left.

1 голос
/ 12 января 2016

В наше время это можно сделать с помощью flex.

Установите свойство контейнера (body в этом случае) display на flex, затем установите ширину левого div на 100%. 

body {
    margin: 0;
    padding: 0;
    display: flex;
}

#left {
    background-color: red;
    width: 100%;
}

#right {
    width: 80px;
    background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
    <title>#{get 'title' /}</title>
</head>
<body>
<div id="left">
    Left
</div>
<div id="right">
    Right
</div>
</body>
</html>
1 голос
/ 09 февраля 2011

Вы можете изменить position:relative; из #right на position:absolute;top:0;right:0;. Это позволит расположить элемент в правом верхнем углу его родителя.

Пример: http://jsfiddle.net/WaQGW/

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

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

...