CSS dwa div obok siebie

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ć?

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>

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ć.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

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.

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.

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:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Wykazano:

Edycja: Hmm, ciekawe. Okno podglądu pokazuje poprawnie sformatowane div, ale renderowany element postu nie. Przykro mi, więc musisz spróbować sam.

Wpadłem dzisiaj na ten problem. W oparciu o powyższe rozwiązania działało to dla mnie:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Po prostu ustaw div nadrzędny na całą szerokość i ułóż div znajdujące się w nim.

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

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

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:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Uwaga

Jeśli chcesz uniknąć korzystając z tabeli, jak powiedziałem wcześniej, można użyć float: left;a float: right;i następnego elementu, nie zapomnij dodać clear: left;, clear: right;lub clear: both;w celu uzyskania pozycji czyszczona.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Będzie to działało OK, o ile zostanie ustawiony clear: bothelement oddzielający ten blok dwóch kolumn.

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

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

Sztuką jest użycie prawego dopełnienia głównego pola, ale skorzystaj z tego miejsca ponownie, umieszczając prawe pole ponownie z marginesem prawym.

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!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

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

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:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Parafrazując jedną z moich stron internetowych, która robi coś podobnego:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

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.