Jak umieścić div obok siebie

241

Mam główny div otoki, który jest ustawiony na 100% szerokości. Wewnątrz chciałbym mieć dwa divy, jeden o stałej szerokości, a drugi, który wypełnia resztę przestrzeni. Jak mogę unieść drugi div, aby wypełnić resztę przestrzeni. Dziękuję za wszelką pomoc.

markt
źródło
2
Następnym razem również umieść swój przykładowy kod, aby pytanie stało się bardziej zrozumiałe dla programistów tutaj.
Rob
1
jest pozycja: absolutna opcja? możesz ustawić pozycję po bokach kontenera, a div przyjmie nowy rozmiar.
AlexanderMP

Odpowiedzi:

363

Istnieje wiele sposobów zrobienia tego, o co prosisz:

  1. Korzystanie z właściwości CSSfloat :

    <div style="width: 100%; overflow: hidden;">
        <div style="width: 600px; float: left;"> Left </div>
        <div style="margin-left: 620px;"> Right </div>
    </div>
    
  2. Korzystanie z właściwości CSSdisplay - które można wykorzystać, aby divs działał jak table:

    <div style="width: 100%; display: table;">
        <div style="display: table-row">
            <div style="width: 600px; display: table-cell;"> Left </div>
            <div style="display: table-cell;"> Right </div>
        </div>
    </div>
    

Jest więcej metod, ale te dwa są najbardziej popularne.

Crozin
źródło
17
Rozwiązanie HTML 5 z @filoxo, użyj tego zamiast
TheMcMurder
1
Co powiedział poprzedni komentator: rozważ dodanie rozwiązania HTML5 dla każdego filoxo jako nr 3.
Ahmed Fasih
2
@TheMcMurder: dla nas, którzy muszą obsługiwać stare przeglądarki (np. IE <11), nie jest to opcja.
Oyvind
@Oyvind, masz dokładnie rację. To zależy od twojego przypadku użycia. Jeśli wspierasz IE 8, 9 lub 10, musiałbyś skorzystać z obsługi polyfill. Polecam usługę taką jak polyfill.io cdn.polyfill.io/v2/docs lub github.com/10up/flexibility, ale możesz mieć naprawdę ścisłe wymagania, które uniemożliwiają stosowanie wieloskładników.
TheMcMurder
1
co robi przepełnienie: ukryte? czy nie jest tak w przypadku elementów o określonej wysokości?
Michael
177

CSS3 wprowadził elastyczne skrzynki (znane również jako flex box), które również mogą osiągnąć to zachowanie.

Po prostu określ szerokość pierwszego diva, a następnie podaj drugiemu flex-growwartość, 1która pozwoli mu wypełnić pozostałą szerokość elementu nadrzędnego.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}
<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

Demo jsFiddle

Pamiętaj, że pola Flex nie są wstecznie kompatybilne ze starymi przeglądarkami, ale są świetną opcją do celowania w nowoczesne przeglądarki (patrz także Caniuse i MDN ). Świetny kompleksowy przewodnik na temat korzystania z Flex Boxów jest dostępny w CSS Tricks .

filoxo
źródło
5
Znalezienie rozwiązania zajęło cały dzień, a ta odpowiedź go rozwiązała! Mam 4 panele obok siebie, a 3 i 4 panele czasami nie mają nic w sobie. Wszyscy żyją w zawierającej div z obwódką wokół nich. Cała liczba zmiennoprzecinkowa: pozostawiona na pierwszej sytuacji div pozostawiła mnie z div przechodzącą obok granicy na dole, ponieważ generowane etykiety są dynamiczne. Etykiety mają rozpiętość, ponieważ tak właśnie renderuje je ASP. Nie mając float: left wykonał tylko 3 divy w tym samym rzędzie. A używanie stołu nie wchodzi w rachubę. Dziękuję Ci!
Luminous
Czy istnieje metoda zgodna wstecz, aby użyć czegoś takiego, tj. Dla nas biedni saps, którzy nadal muszą wspierać IE 8-10
Ben A. Hilleli
@ BenA.Hilleli, które mogą zależeć od twoich wymagań (np. Stopniowe ulepszanie lub pełna wdzięku degradacja ), ale szybkie wyszukiwanie przyniosło ten (nieco przestarzały) przewodnik „Jak korzystać z Flexboksa w prawdziwym świecie” oraz Flexie.js, które obsługuje IE6-9. Możesz też wypróbować inne odpowiedzi na to pytanie, ponieważ osiągają one to samo.
filoxo
20

Nie wiem wiele o strategiach projektowych HTML i CSS, ale jeśli szukasz czegoś prostego, co automatycznie dopasuje się do ekranu (tak jak ja), uważam, że najprostszym rozwiązaniem jest sprawienie, by div zachowywały się jak słowa w paragraf. Spróbuj określićdisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Możliwe, że nie będzie konieczne określenie szerokości DIV

Guillermo Ruffino
źródło
5
Prawdopodobnie display:flexjest to najlepsze rozwiązanie, ale myślę, że inline-blockjest również doskonałe, ponieważ działa na większej liczbie przeglądarek. Nawiasem mówiąc, być może będziesz musiał zawinąć oba divy, <div style="white-space:nowrap">aby zapobiec rozpadowi przy zmianie rozmiaru.
John Henckel,
To dobre rozwiązanie do tworzenia szablonów. Jedynym problemem jest to, że wypycha div z mniejszą zawartością na dół. Jak zepchnąć go na szczyt?
prawie początkujący
1
nvm, wystarczy go przeszukać, rozwiązaniem jest: vertical-align: top;
prawie początkujący
@JohnHenckel, co oznacza, że ​​nie jest przeznaczony dla wszystkich przeglądarek, czy nie mógłby działać dla wszystkich przeglądarek w ten sam sposób? inline-blockkod.
Kavindu Gayantha
@ guillermo nie działa dobrze. wszystkie divy nie umieszczają się obok siebie. dlaczego. to nie jest jasne.
Kavindu Gayantha
14

Aby to osiągnąć, możesz użyć siatki CSS, jest to wersja długa dla celów ilustracji:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}
<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Lub bardziej tradycyjna metoda wykorzystująca zmiennoprzecinkowe i margines.

W tym przykładzie podałem kolor tła, aby pomóc pokazać, gdzie są rzeczy - a także co zrobić z zawartością poniżej obszaru zmiennoprzecinkowego.

Nie umieszczaj swoich stylów w wierszu w prawdziwym życiu, wyodrębnij je do arkusza stylów.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}
    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
Fenton
źródło
2

Daj pierwszemu divowi pływak w lewo i unieruchomiony, drugi div 100% szerokości i float w lewo. To powinno wystarczyć. Jeśli chcesz umieścić elementy poniżej, musisz zaznaczyć: oba elementy, które chcesz umieścić poniżej

Obrabować
źródło
2
<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Będzie to zgodne z wieloma przeglądarkami. Bez marginesu po lewej stronie wystąpią problemy z treścią przebiegającą do końca w lewo, jeśli zawartość jest dłuższa niż pasek boczny.

RDL
źródło
1

Jeśli nie tagujesz IE6, ustaw zmiennoprzecinkowy drugi <div>i nadaj mu margines równy (lub może nieco większy niż) <div>stałej szerokości pierwszego.

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Margines uwzględnia możliwość, że „pozostała przestrzeń” <div>może zawierać więcej treści niż „stała szerokość” <div>.

Nie podawaj stałej szerokości jako tła; jeśli chcesz zobaczyć je wyraźnie jako różne „kolumny”, użyj sztuczki Sztuczne kolumny .

Richard JP Le Guen
źródło