Jak ustawić zmienną szerokość div, aby zajęła pozostałe miejsce bez popychania innych elementów div?

Question

Dla części układu, które chcę utworzyć, chcę użyć trzech elementów div, wszystkie unoszące się obok siebie. Lewy i prawy mają zestaw maksymalnej szerokości, który działa dobrze, ale chcę, aby środkowy div rozszerzył swoją szerokość, aby wypełnić pozostałą przestrzeń. Aby wyjaśnić, lewy i prawy div mogą mieć szerokość od 0 do maksymalnej szerokości, w zależności od tego, co jest w każdym, i chcę, aby środkowy div rozszerzył swoją szerokość, tak aby zajmował resztę przestrzeni nie używane przez divy po obu stronach.

Problem polega na tym, że jeśli w środkowym dziale jest dużo treści, rozwija się i przesuwa prawą div do następnej linii, zamiast utrzymywać ją z pozostałymi dwoma.

Oto css mam tak daleko:

#left-column { 
width: auto; 
max-width: 200px; 
height: auto; 
float: left; 
} 

#middle-column { 
float: left; 
width: auto; 
} 

#right-column { 
width: auto; 
max-width: 200px; 
height: auto; 
float: right; 
} 

... i HTML:
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>

myślę, że można to osiągnąć za pomocą trzech kolumn, stół jednorzędowe , ale absolutnie chcę NOT chcesz używać tabel - Chcę osiągnąć jak najwięcej za pomocą czystego css.

Dzięki!

Answer 1

klasyczny pływaków

Jeżeli zamówisz go:

<div id="left-column"></div> 
<div id="right-column"></div> 
<div id="middle-column"></div> 

i unosić lewą kolumnę w lewo, a prawą prawej kolumnie środkowa kolumna powinna wypełnić pozostałą przestrzeń. Będziesz mieć jednak pewne problemy z marginesami, obramowaniem i paddingami.

---

schematu flexbox

Jeśli nie ma potrzeby obsługi starszych przeglądarek, można użyć schematu flexbox. Dzięki flexbox ten rodzaj struktury staje się znacznie prostszy, a znaczniki nie muszą się zmieniać.

Musisz będzie będzie musiał wybrać element nadrzędny, więc dla celów tego demo, kod zostanie opakowany przez <div class="wrapper">.

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 200px; 
 
} 
 

 
.left { 
 
    background-color: red; 
 
    width: 100px; 
 
} 
 
.middle { 
 
    background-color: green; 
 
    flex: 1; 
 
} 
 
.right { 
 
    background-color: blue; 
 
    width: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <div class="middle"></div> 
 
    <div class="right"></div> 
 
</div>

Wysokość i szerokość dodaje się wyraźnie tak, iż <div> S są widoczne. W przypadku rzeczywistej zawartości kolumny automatycznie dostosowywałyby się.

Answer 2

nie chcą pogłębiać się stary wątek tutaj, ale szukałem rozwiązania własnego problemu i natknąłem się na to i pomyślałem, że lepiej udział Francisco ...

Stoliki są straszny pomysł na układ pozycjonowania, głównym problemem jest to, że zanim tabela pokaże/wyrenderuje w przeglądarce, musi wyrenderować znacznik </table>.

Czy możesz sobie wyobrazić, że jeśli zawartość kolumny Facebooka posłużyła za tabelę do jej układu, zajęłoby to całe wieki, aby wyrenderować cokolwiek na ekranie, sprawdzając na przykład oś czasu! Kolejną kwestią jest to, że tabele zachowują się bardzo różnie w każdej przeglądarce.

Zasadniczo: <table> dla układu = NIE !, <table> do wystawiania rzędów danych lub informacji = TAK!