All geek questions in one place

Intrablock breaks with many children

If I create a container div and then some child div elements (say three) and set the parent to display: inline-block, I get something like this jsfiddle-good

proper inline-block functionality

CSS

#container {
    border: 1px solid blue;
    padding: 2px; 
    display: inline-block;
}

.child {
    width: 100px;
    border: 1px solid black;
    float: left;
    margin: 2px;
}

HTML

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>

</div>

It's good! I want to. The problem occurs when I have many children (say 30) jsfiddle-bad

inline-block with extra white-space

Why is it a white spear space, and how do I get the div container to size down correctly?

+4
source share
1 answer

, , 10 . , : http://jsfiddle.net/AnDrewpa18/t5Nth/

HTML

<body>
<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
</div>

CSS

#container {
    border: 1px solid blue;
    padding: 2px;
    display: inline-block;
}
.child {
    width: 110px;
    border: 1px solid black;
    float: left;
    margin: 2px;
}
+2

Source: https://habr.com/ru/post/1532895/

More articles:


All Articles