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

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

<!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>

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

источник

2011-02-09 Jan Thomä

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

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

Working Example

источник

2011-02-09 14:23:14

Это работает, и, кажется, самый простой из предложенных решений. Спасибо! Я не понимаю, почему это работает. Не могли бы вы объяснить, почему? –

Поскольку элементы рисуются по порядку, вместо того, чтобы перемещаться вниз по левому элементу, чтобы нарисовать правое, справа рисуется, а левое - вокруг правого элемента. –

Я вижу. Спасибо :) –

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

источник

2011-02-09 14:23:26

, используя 'display: inline' содержимое будет определять ширину элемента, в результате элемент' # left' не будет выравниваться вправо, не используя 'width'. – Sotiris

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

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

источник

2011-02-09 14:26:04 Sotiris

С другой стороны, если вы ищете ЛЕВЫЕ дела до оставаться в статическом ширине и ПРАВЫХ дела до расширения и контракта с размером страницы, нужен использовать следующий код :

.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>

источник

2012-08-13 18:19:52

в настоящее время это можно сделать с помощью 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>

источник

2016-01-12 17:49:33

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

ответ

Смежные вопросы