Blokada wbudowana w dwa bloki div, dlaczego nie znajdują się obok siebie?

Question

Stworzyłem dwa divy i chciałbym, aby pozostały obok siebie, ale jeden z nich zawsze schodzi, nawet jeśli mają one wyświetlacz: blok inline. Co jest nie tak? Nie rozumiem.

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
.a { 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
.b { 
 
    width: 20px; 
 
    display: inline-block; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="a">hello hello hello hello hello hello hello</div> 
 
    <div class="b">aaa</div> 
 
</div>

Answer 1

problem

bez określania szerokości szerokość bloku liniowego jest określana automatycznie przez jego zawartości. W twoim przypadku czerwony blok zawiera długą linię, co sprawia, że ​​wypełnia (prawie) całą dostępną przestrzeń. Niebieski blok jest szerszy niż przestrzeń pozostawiona do dyspozycji przez czerwony blok, powodując zawijanie do następnej linii.

Roztwór 1: określający szerokość obu elementów

W poniższym fragmencie oba pustak szerokości. Możesz określić szerokość piksela, ponieważ znasz także rozmiar kontenera, ale procenty też by działały, o ile dodadzą do 100%, a nie więcej.

Zauważ, że musiałem trochę zmodyfikować HTML, aby usunąć spacje między nimi. Jest to częsta pułapka przy wyborze tego rozwiązania.

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
.a { 
 
    display: inline-block; 
 
    width: 180px; 
 
    background: red; 
 
} 
 
.b { 
 
    display: inline-block; 
 
    width: 20px; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="a">hello hello hello hello hello hello hello 
 
    </div><div class="b">aaa</div> 
 
</div>

Rozwiązanie 2: wyświetlanie elementów jak komórki tabeli w wierszu

Alternatywnie, można uczynić je zachowywać się jak wiersz tabeli. Ma to tę zaletę, że ich wysokość również się do siebie dopasuje, i że można łatwo dać jedną z nich szerokość, a drugą nie. Ponadto nie będziesz mieć problemu białych znaków między elementami, które musisz rozwiązać, korzystając z pierwszego rozwiązania.

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: table; 
 
} 
 
.a { 
 
    display: table-cell; 
 
    background: red; 
 
} 
 
.b { 
 
    width: 20px; 
 
    display: table-cell; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="a">hello hello hello hello hello hello hello 
 
    </div><div class="b">aaa</div> 
 
</div>

Answer 2

Twoje inline-block elementów wypełni całą przestrzeń poziomą, jeśli mają wystarczająco dużo treści, spychając inne elementy poniżej. Jednym ze sposobów naprawienia tego byłoby użycie Flexbox.

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
} 
 
.a { 
 
    background: red; 
 
} 
 
.b { 
 
    width: 20px; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="a">hello hello hello hello hello hello hello</div> 
 
    <div class="b">aaa</div> 
 
</div>

Answer 3

Od tekstu wewnątrz div z klasą „a” jest duża w stosunku do wielkości div, to trwa całe kontenery szerokość, dając DIV stałej szerokości mniejszej niż pojemnika szerokość ustalona lub przez %, divy będą pasować obok siebie.

EDIT

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
.a { 
 
    display: inline-block; 
 
    background: red; 
 
    width:150px; 
 
} 
 
.b { 
 
    width: 20px; 
 
    display: inline-block; 
 
    background: blue; 
 
    vertical-align:top; 
 
}

<div class="container"> 
 
    <div class="a">hello hello hello hello hello hello hello</div> 
 
    <div class="b">aaa</div> 
 
</div>

Answer 4

The display:inline-block sprawia, że ​​oba te elementy pozostają w tej samej linii czy jest wystarczająco dużo miejsca na nim. W przeciwnym razie linia zostanie przerwana.

Istnieje wiele rozwiązań, które tu pracują, ale pozwala myśleć prostsze ...

Jeśli zdefiniowano stałą szerokość zarówno do pojemnika i „b” div, to dlaczego nie ustawić stałą szerokość do także "a" div z pozostałym 180px?

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
.a { 
 
    width: 180px; 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
.b { 
 
    width: 20px; 
 
    display: inline-block; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="a">hello hello hello hello hello hello hello</div><div class="b">aaa</div> 
 
</div>