Jak sprawić, by element div wypełnił pozostałą szerokość?
<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>
<div id="div2"></div>
<div id="div3" style="width: 100px; float: right;"></div>
</div>
Jak mogę div2uzupełnić pozostałą część?
Odpowiedzi:
Wypróbuj coś takiego:
<style>
#divMain { width: 500px; }
#left-div { width: 100px; float: left; background-color: #fcc; }
#middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#right-div { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="left-div">
left div
</div>
<div id="right-div">
right div
</div>
<div id="middle-div">
middle div<br />bit taller
</div>
</div>
Elementy div w naturalny sposób zajmą 100% szerokości swojego kontenera, nie ma potrzeby jawnego ustawiania tej szerokości. Dodając lewy / prawy margines, taki sam jak dwa boczne elementy div, jego własna zawartość musi znaleźć się między nimi.
Zauważ, że „środkowy element div” znajduje się po „prawym elemencie div” w kodzie HTML
To rozwiązanie jest jeszcze prostsze niż to, które zapewnia Leigh. W rzeczywistości jest na nim oparty.
Tutaj możesz zauważyć, że środkowy element (w naszym przypadku z "content__middle"klasą) nie ma określonej właściwości wymiarowej - bez szerokości, wypełnienia ani właściwości związanych z marginesem - ale tylko overflow: auto;(patrz uwaga 1).
Ogromną zaletą jest to, że teraz możesz określić a max-widthi a min-widthpo lewej i prawej stronie elementów . Co jest fantastyczne w przypadku płynnych układów… stąd responsywny układ :-)
uwaga 1: w porównaniu z odpowiedzią Leigh, gdzie musisz dodać właściwości margin-left& margin-rightdo "content__middle"klasy.
Tutaj lewy i prawy element (z klasami "content__left"i "content__right") mają stałą szerokość (w pikselach): stąd nazywany układem niepłynnym.
Demo na żywo na http://jsbin.com/qukocefudusu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 100px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 100px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
Tutaj lewy i prawy element (z klasami "content__left"i "content__right") mają zmienną szerokość (w procentach), ale także minimalną i maksymalną szerokość: stąd nazywany układem płynnym.
Live Demo w płynnym układzie z max-widthwłaściwościami http://jsbin.com/runahoremuwu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 20%;
max-width: 170px;
min-width: 40px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 20%;
max-width: 250px;
min-width: 80px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
Testowane na BrowserStack.com w następujących przeglądarkach internetowych:
overflowtworzy kontekst formatowania bloku? miałby display: flexten sam efekt?
overflow-y: hiddenna tym, że a) dozwolona szerokość może być ustawiona, b) ma najlepszą obsługę przeglądarki ic) nie jest tabelą
Rozwiązaniem są pojemniki Flex-box - i są fantastyczne. Od dekady chciałem czegoś takiego w CSS. Wszystko, czego potrzebujesz, to dodać display: flexdo swojego stylu styl „Main” i flex-grow: 100(gdzie 100 jest dowolne - nie jest ważne, aby było dokładnie 100). Spróbuj dodać ten styl (dodano kolory, aby efekt był widoczny):
<style>
#Main {
background-color: lightgray;
display: flex;
}
#div1 {
border: 1px solid green;
height: 50px;
display: inline-flex;
}
#div2 {
border: 1px solid blue;
height: 50px;
display: inline-flex;
flex-grow: 100;
}
#div3 {
border: 1px solid orange;
height: 50px;
display: inline-flex;
}
</style>
Więcej informacji o skrzynkach elastycznych tutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Użyj CSS schematu flexbox flex-grow własności do osiągnięcia tego celu.
.main {
display: flex;
}
.col-1, .col-3 {
width: 100px;
}
.col-2 {
flex-grow: 1;
}<div class="main">
<div class="col-1" style="background: #fc9;">Left column</div>
<div class="col-2" style="background: #eee;">Middle column</div>
<div class="col-3" style="background: #fc9;">Right column</div>
</div>Chociaż bitpóźno publikujesz odpowiedź, tutaj jest alternatywne podejście bez używania marginesów.
<style>
#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { overflow:hidden; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="div1">
div 1
</div>
<div id="div3">
div 3
</div>
<div id="div2">
div 2<br />bit taller
</div>
</div>
Ta metoda działa jak magia, ale oto wyjaśnienie:) \
Element DIV, który ma zająć pozostałe miejsce, musi być klasą. Pozostałe elementy DIV mogą być identyfikatorami, ale muszą mieć szerokość.
CSS :
#main_center {
width:1000px;
height:100px;
padding:0px 0px;
margin:0px auto;
display:block;
}
#left {
width:200px;
height:100px;
padding:0px 0px;
margin:0px auto;
background:#c6f5c6;
float:left;
}
.right {
height:100px;
padding:0px 0px;
margin:0px auto;
overflow:hidden;
background:#000fff;
}
.clear {
clear:both;
}
HTML :
<body>
<div id="main_center">
<div id="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
Poniższy link zawiera kod w akcji, który powinien rozwiązać pozostałą kwestię pokrycia obszaru.
Szukałem rozwiązania przeciwnego problemu, w którym potrzebowałem elementu div o stałej szerokości w środku i elementu div o płynnej szerokości po obu stronach, więc wymyśliłem następujące i pomyślałem, że opublikuję go tutaj, gdyby ktoś tego potrzebował.
#wrapper {
clear: both;
width: 100%;
}
#wrapper div {
display: inline-block;
height: 500px;
}
#center {
background-color: green;
margin: 0 auto;
overflow: auto;
width: 500px;
}
#left {
float: left;
}
#right {
float: right;
}
.fluid {
background-color: yellow;
width: calc(50% - 250px);
}<div id="wrapper">
<div id="center">
This is fixed width in the centre
</div>
<div id="left" class="fluid">
This is fluid width on the left
</div>
<div id="right" class="fluid">
This is fluid width on the right
</div>
</div>Jeśli zmienisz szerokość #centerelementu, musisz zaktualizować właściwość width .fluidna:
width: calc(50% - [half of center width]px);