Menu
Currently I have a div which has a max-width:200px, inside the div there are some spans with a property white-space:nowrap and display: inline-block.
.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>
The current behavior is that when the length of span A and span B is over the max-width of div, span B is wrapped into next line.
<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>
However, the width of div is not resized corresponding to the length of the span. It always has a width of 200px which causes the problem that there are empty space after span.
What I want is to make sure the div resize by the length of the span, without any empty space.
Anyone can help me with this? I'm not asking for an answer directly. Some explanation would be better.
629
Here, divs separate out larger chunks of content, and spans wrap segments within these divs. We can use the div element to separate contents of a page into chunks. Each of these orange blocks is a div element. We can use a span tag to change the color of text.
One way you can achieve this is setting display: inline-block; on the div . It is by default a block element, which will always fill the width it can fill (unless specifying width of course).
If you want to prevent them from wrapping, either remove the white space you have used for formatting, or add white-space:nowrap; to the rule for .
first add a parent div/wrap and put those two divs of yours into it. Overall, whatever size you add to the min-width itll scale the parent div down to the size specified. once the window is sized down past your specified size, itll behave like any other window. this is my way of doing it.
Using max-width will not allow the div to be wider than given value (200px in this case)
using min-width instead of max-width might help you...
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
