Jak umieścić dwie części div obok siebie, tak aby zapełniały dostępne miejsce?

Mam dwa elementy div, prawy ma szerokość 80 pikseli, a drugi powinien wypełnić pozostałą przestrzeń. Do tej pory próbowałem:Jak umieścić dwie części div obok siebie, tak aby zapełniały dostępne miejsce?

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

Jednak prawe pudełko jest zawsze umieszczane pod lewym pudełkiem, a nie w prawo. Myślę, że to z powodu marginesu. Próbowałem również lewy margines: -80px na prawym, ale to nic nie zmienia. Więc w jaki sposób muszę zmienić CSS, aby właściwy div był w tej samej linii, co lewy div?

Źródło

2011-02-09 Jan Thomä

Po lewej stronie masz prawo div.

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

Working Example

Źródło

2011-02-09 14:23:14

To działa, i wydaje się być najprostszym z sugerowanych rozwiązań. Dziękuję Ci! Nie rozumiem, dlaczego to działa. Czy możesz wyjaśnić, dlaczego? –

Ponieważ elementy są rysowane w kolejności, zamiast przesuwać się w dół za lewym elementem, aby narysować prawą, prawą narysowano przed, a lewą narysowano wokół prawego elementu. –

Rozumiem. Dziękuję :) –

To dlatego div jest element bloku, czyli zawsze będzie przerwać przepływ. Możesz zmienić zarówno div: display do inline ido.

Źródło

2011-02-09 14:23:26

za pomocą 'display: inline' zawartość określi szerokość elementu, z czego wynik' # left' element nie rozciąga się na prawą stronę bez użycia "szerokości". – Sotiris

Można zmienić wartość position:relative; z #right na position:absolute;top:0;right:0;. Spowoduje to umieszczenie elementu w prawym górnym rogu jego rodzica.

Przykład: http://jsfiddle.net/WaQGW/

Źródło

2011-02-09 14:26:04 Sotiris

Ewentualnie, jeśli szukasz div w lewo, aby pozostać przy statycznym szerokości i prawo div, aby rozwinąć i umowy z wielkością stronie by użyć następującego kodu :

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

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

I HTML byłoby ...

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

Źródło

2012-08-13 18:19:52

Obecnie można to zrobić z flex.

Set kontenera (body w tym przypadku) display nieruchomość do flex, a następnie ustawić szerokość lewej div do 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>

Źródło

2016-01-12 17:49:33

Jak umieścić dwie części div obok siebie, tak aby zapełniały dostępne miejsce?

Odpowiedz

Powiązane problemy