Chcę umieścić dwa <div>
s obok siebie. Po prawej <div>
jest około 200 pikseli; a lewa strona <div>
musi wypełnić resztę szerokości ekranu? W jaki sposób mogę to zrobić?
230
Możesz użyć Flexboksa, aby uporządkować swoje przedmioty:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
Jest to po prostu skrobanie powierzchni Flexbox. Flexbox potrafi robić niesamowite rzeczy.
Aby obsługiwać starszą przeglądarkę, możesz użyć pływaka CSS i właściwości szerokości , aby go rozwiązać.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
float:left
? Twój komentarz do mojej odpowiedzi mówi: „lft div jest wymagany dla całego lewego obszaru”, alefloat:left
spowoduje ciasne zawinięcie zawartości.Nie wiem, czy to wciąż aktualny problem, czy nie, ale właśnie napotkałem ten sam problem i użyłem
display: inline-block;
tagu CSS . Zawinięcie ich w div, aby można je było odpowiednio ustawić.Zauważ, że użycie atrybutu stylu wbudowanego zostało użyte tylko dla zwięzłości tego przykładu, oczywiście zostały one przeniesione do zewnętrznego pliku CSS.
źródło
width
właściwość wszystkich moich 2 div obok siebie, aby zapobiec zawijaniu drugiego do nowej linii.Niestety nie jest to trywialna sprawa do rozwiązania w przypadku ogólnym. Najłatwiej byłoby dodać właściwość w stylu css „float: right;” do div 200px, spowodowałoby to jednak, że twoja „główna” -div faktycznie byłaby pełna, a każdy tekst w niej unosiłby się wokół krawędzi div-200px, co często wygląda dziwnie, w zależności od zawartości (właściwie we wszystkich przypadkach, z wyjątkiem sytuacji, gdy jest to obraz pływający).
EDYCJA: Jak sugeruje Dom, problem owijania można oczywiście rozwiązać z marginesem. Głupi ja.
źródło
Metoda sugerowana przez @roe i @MohitNanda działa, ale jeśli odpowiedni div jest ustawiony jako
float:right;
, to musi być na pierwszym miejscu w źródle HTML. To łamie kolejność odczytu od lewej do prawej, co może być mylące, jeśli strona jest wyświetlana z wyłączonymi stylami. W takim przypadku lepszym rozwiązaniem może być użycie otoki div i pozycjonowania bezwzględnego:Wykazano:
Lewo prawoEdycja: Hmm, ciekawe. Okno podglądu pokazuje poprawnie sformatowane div, ale renderowany element postu nie. Przykro mi, więc musisz spróbować sam.
źródło
Wpadłem dzisiaj na ten problem. W oparciu o powyższe rozwiązania działało to dla mnie:
Po prostu ustaw div nadrzędny na całą szerokość i ułóż div znajdujące się w nim.
źródło
AKTUALIZACJA
Jeśli chcesz umieścić elementy w rzędzie, możesz użyć Flex Layout . Tutaj masz kolejny samouczek Flex . To świetne narzędzie CSS i chociaż nie jest w 100% kompatybilne, każdego dnia jego obsługa jest coraz lepsza. Działa to tak prosto, jak:
HTML
CSS
Dostajesz tutaj pojemnik o łącznej wielkości 4 jednostek, które dzielą przestrzeń z dziećmi w stosunku 1/4 i 3/4.
Zrobiłem przykład w CodePen, który rozwiązuje twój problem. Mam nadzieję, że to pomoże.
http://codepen.io/timbergus/pen/aOoQLR?editors=110
BARDZO STARY
Może to tylko nonsens, ale czy próbowałeś ze stołem? Nie używa bezpośrednio CSS do pozycjonowania div, ale działa dobrze.
Możesz utworzyć tabelę 1x2 i umieścić ją w
divs
środku, a następnie sformatować tabelę za pomocą CSS, aby umieścić je tak, jak chcesz:Uwaga
Jeśli chcesz uniknąć korzystając z tabeli, jak powiedziałem wcześniej, można użyć
float: left;
afloat: right;
i następnego elementu, nie zapomnij dodaćclear: left;
,clear: right;
lubclear: both;
w celu uzyskania pozycji czyszczona.źródło
Będzie to działało OK, o ile zostanie ustawiony
clear: both
element oddzielający ten blok dwóch kolumn.źródło
Napotkałem ten sam problem i działa wersja Mohitsa. Jeśli chcesz zachować lewą i prawą kolejność w pliku HTML, po prostu spróbuj tego. W moim przypadku lewy div dostosowuje rozmiar, prawy div pozostaje na szerokości 260 pikseli.
HTML
CSS
Sztuką jest użycie prawego dopełnienia głównego pola, ale skorzystaj z tego miejsca ponownie, umieszczając prawe pole ponownie z marginesem prawym.
źródło
Używam mieszanki float i overflow-x: hidden. Minimalny kod, zawsze działa.
https://jsfiddle.net/9934sc4d/4/ - PLUS, że nie musisz usuwać pływaka!
źródło
Jak wszyscy zauważyli, zrobisz to, ustawiając
float:right;
na treści RHS i ujemny margines na LHS.Jednak .. jeśli nie użyjesz
float: left;
LHS (tak jak Mohit), otrzymasz efekt stopniowy, ponieważ div LHS nadal będzie zajmował margines miejsca w układzie.Jednak ... zmiennoprzecinkowe LHS zawinie zawartość, więc musisz wstawić childnode o zdefiniowanej szerokości, jeśli nie jest to dopuszczalne, w którym momencie równie dobrze możesz zdefiniować szerokość dla rodzica.
Jednak ... jak zauważa David, możesz zmienić kolejność odczytu znaczników, aby uniknąć wymogu zmiennoprzecinkowego LHS, ale ma to problemy z czytelnością i być może z dostępnością.
Jednak .. ten problem można rozwiązać za pomocą zmiennoprzecinkowych elementów z dodatkowymi znacznikami
(zastrzeżenie: Nie akceptuję div .clearing w tym przykładzie, zobacz szczegóły tutaj )
Biorąc wszystko pod uwagę, myślę, że większość z nas żałuje, że nie było chciwej szerokości: pozostanie w CSS3 ...
źródło
To nie będzie odpowiedź dla wszystkich, ponieważ nie jest obsługiwana w IE7-, ale możesz jej użyć, a następnie użyć alternatywnej odpowiedzi dla IE7-. Wyświetlane są: tabela, wyświetlanie: wiersz tabeli i wyświetlanie: komórka tabeli. Zwróć uwagę, że nie używa to tabel do układania, ale stylizuje div, aby rzeczy ładnie układały się bez problemów z góry. Mój jest aplikacją HTML5, więc działa świetnie.
W tym artykule pokazano przykład: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
Oto jak będzie wyglądał twój arkusz stylów:
źródło
Parafrazując jedną z moich stron internetowych, która robi coś podobnego:
źródło
wystarczy użyć indeksu Z, a wszystko będzie ładnie siedzieć. upewnij się, że pozycje są oznaczone jako stałe lub bezwzględne. wtedy nic nie będzie się poruszać, jak w przypadku pływaka.
źródło