Jak umieścić div obok siebie

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.

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.

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 .

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

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>

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

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

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 .