Jak zmienić rozmiar elementu div, gdy przedział wewnątrz elementu div jest zawinięty?

Obecnie mam div, który ma max-szerokość: 200px, wewnątrz div istnieją pewne rozpiętości z właściwością white-space: nowrap i display: inline-block.Jak zmienić rozmiar elementu div, gdy przedział wewnątrz elementu div jest zawinięty?

.a { 
    max-width:200px; 
} 

.b { 
display: inline-block; 
white-space:nowrap; 
} 

<div class="a"> 
<span class="b">A</span> <span class="b">B</span> 
<span class="b">C</span> 
</div>

Obecny zachowania jest to, że gdy długość przęsła A i B przez okres max szerokości div, zakres B jest zawinięty w następnym wierszu.

<div class="a"> 
<span class="b">A</span> Empty space here 
<span class="b">B</span> Empty space here 
<span class="b">C</span> Empty space here 
</div>

Jednak szerokość elementu div nie jest zmieniana zgodnie z długością przęsła. Ma zawsze szerokość 200 pikseli, co powoduje problem z pustą przestrzenią po rozpiętości.

To, czego chcę, to upewnić się, że rozmiar div zmienia się o długość przęsła, bez pustej przestrzeni.

Ktoś może mi w tym pomóc? Nie proszę o bezpośrednią odpowiedź. Niektóre wyjaśnienia byłyby lepsze.

Źródło

2016-09-15 Francis Zhu

wyjaśnienie: [Dokonaj pojemnik kurczyć do montażu elementy potomne podczas ich zawijania] (http://stackoverflow.com/q/37406353/3597276) –

co ty spodziewać się zamiast tego?jeśli A + B nie zmieści się na tej samej linii I umieścisz nowrap, aby zawartość span nie mogła przejść do następnej linii, właściwość inline-block popchnie B do następnej linii. – softwarenewbie7331

Pierwsza linia, która ma A + B, stanie się krótsza po tym, jak B zostanie wepchnięty do następnej linii, prawda? Spodziewam się, że szerokość elementu div powinna być nieco większa niż długość A lub B lub C. Jednak rzeczywisty wynik jest taki, że istnieje wiele białych odstępów między rozpiętością A (lub B lub C) i prawą stronę div. –

Korzystanie max-width nie pozwoli na div być szersza niż podana wartość (w tym przypadku 200px) użyciu min-width zamiast max-width może pomóc ...

Źródło

2016-09-15 00:58:07

:) Dzięki za odpowiedź. Właściwie to nie chcę, aby div był szerszy, zamiast tego chcę, aby div był węższy. –

następnie powinieneś ustawić 'div.a' na' display: inline-block; ' –

w klasie A, domyślnie white-space jest normalne przeglądarka ignorować pustą przestrzeń, można dodać ramkę do zobaczenia!

Źródło

2016-09-15 01:02:44

.a { 
    max-width:200px; 
} 

.b { 
display: inline-block; 
} 
.c { 
white-space:nowrap; 
} 

<div class="a"> 
    <div class="c"> 
    <span class="b">A</span> <span class="b">B</span> 
    </div> 
    <span class="b">C</span> 
</div>

można wymusić & B, aby być na tej samej linii, jak to, nie bardzo elegancki, proponuję za pomocą ramy kolumna/gRID dla easi Kontrola nad tymi typami elementów.

prawdopodobnie musieli zdecydować, jak radzić sobie z przepełnienia-X, jeśli trzymać posiadające zawartość, która przekracza 100px

można spróbować schematu flexbox (jako bonus próbuje obsłużyć dodatkowe spacje dla ciebie):

.a { 
    max-width:200px; 
    display:flex; 
    flex-direction:row; 
} 

.b { 
display: flex; 
flex: 1 1 100px; 
} 
</style> 
</head> 
<body> 
<div class="a"> 
    <span class="b">A</span> <span class="b">B</span> 
    <span class="b">C</span> 
</div>

Źródło

2016-09-15 01:16:49 softwarenewbie7331

Dzięki za twoje heads up. Naprawdę potrzebuję przepełnienia do obsługi sprawy, gdy zawartość przekracza maksymalną szerokość. –

Siła A i B w tej samej linii nie jest tym, czego chcę. To, czego chcę, to dodawanie span w tej samej linii, o ile nie przekraczają one maksymalnej szerokości elementu div. Po przekroczeniu maksimum, rozpiętość powodująca sytuację zostanie zawinięta do następnej linii. –

spójrz na https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – softwarenewbie7331

.a { 
 
    max-width:200px; 
 
} 
 

 
#sameline { 
 
display:inline-block; 
 
white-space:nowrap; 
 
}

<div class="a"> 
 
    <div id=sameline> 
 
<span class="b">A</span> Empty space here 
 
<span class="b">B</span> Empty space here 
 
<span class="b">C</span> Empty space here 
 
    </div> 
 
</div>

Źródło

2016-09-15 01:42:25 Gowtham

Dzię kujemy za twojĘ ... odpowiedź, ale Nie chcę wszystkich rozpiętości w tej samej linii. :) –

ok, jak chcesz?, Każdy zrzut ekranu z expematem będzie dla mnie łatwy – Gowtham

http://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as -they-wrap jasno określa mój problem, przepraszam za mój poprzedni, słaby opis problemu. :) –

o ile zrozumiałem, problem wydaje się display: inline-block; na <span> ... spróbuj usunąć ten styl i użyj wartości domyślnej, która powinna być display: inline; ...

Mimo że rozpiętość działa w formie wstawianej, działa również w formie blokowej, co oznacza, że rozkłada się gdy nie ma już dostępnej szerokości na rodzica, generując wspomniane puste miejsce.

EDIT

... Zapomniałem wspomnieć również, usuń white-space: nowrap; ...

Źródło

2016-09-15 02:57:32

.a{ 
max-width:200px; 
margin:5px; 
display:inline-block; 
white-space:nowrap; 
}

<div class="a"> 
<span class="b">A</span> Empty space here 
<span class="b">B</span> Empty space here 
<span class="b">C</span> Empty space here 
</div>

Źródło

2016-09-15 03:51:01

W tym przypadku wszystkie przęsła znajdują się w tej samej linii, co nie jest tym, czego chcę. :) –

Jak zmienić rozmiar elementu div, gdy przedział wewnątrz elementu div jest zawinięty?

Odpowiedz

Powiązane problemy