How do you horizontally align a div after a wrap?-CodePudding

Let's say we have 9 divs to display as float:left, each 350px wide and the heights are given as 200, 400, 300, 350, 300, 200, 450, 100 and 400. The window can fit only 4 of them in a row. What I am observing is that the 1st 4 div display as expected, but the 5th div (after the wrap) starts at x=700, under div3. We can not be sure after which div there is going to be a wrap, but whenever it happens, we want it to start at 0, i.e., div 5 should appear below div1 and so on, e.g., expecting div9 to be under div5. How can we achieve this? Thank you.

<html>
    <body style="padding:20px;">
            <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
            <div style="float:left; width:350; height:400 border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
            <div style="float:left; width:350; height:300 border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
            <div style="float:left; width:350; height:350 border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
            <div style="float:left; width:350; height:300 border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
            <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
            <div style="float:left; width:350; height:450 border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
            <div style="float:left; width:350; height:100 border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
            <div style="float:left; width:350; height:400 border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
    </body>

CodePudding user response：

using flex is optimal

<html>
        <body style="display:flex; flex-wrap: wrap; padding:20px;">
                <div style="width:350; height:200 border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
                <div style="width:350; height:400 border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
                <div style="width:350; height:300 border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
                <div style="width:350; height:350 border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
                <div style="width:350; height:300 border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
                <div style="width:350; height:200 border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
                <div style="width:350; height:450 border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
                <div style="width:350; height:100 border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
                <div style="width:350; height:400 border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
        </body>
    </html>

CodePudding user response：

You should add display: flex; and then flex-wrap: wrap; property in your body tag.
Also add unit like px, rem etc ;to the height and width property of the divs

<body style="padding:20px; display: flex; flex-wrap: wrap;">
  <div style="width:350px; height:200px; border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
  <div style="width:350px; height:400px; border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
  <div style="width:350px; height:300px; border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
  <div style="width:350px; height:350px; border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
  <div style="width:350px; height:300px; border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
  <div style="width:350px; height:200px; border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
  <div style="width:350px; height:450px; border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
  <div style="width:350px; height:100px; border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
  <div style="width:350px; height:400px; border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
</body>

CodePudding user response：

use

.className{ clear:both; }

<html>
    <body style="padding:20px;">
        <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
        <div style="float:left; width:350; height:400 border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
        <div style="float:left; width:350; height:300 border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
        <div style="float:left; width:350; height:350 border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
        <div style="float:left; clear:both; width:350; height:300 border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
        <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
        <div style="float:left; width:350; height:450 border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
        <div style="float:left; width:350; height:100 border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
        <div style="float:left; clear:both; width:350; height:400 border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
    </body>
</html>

it will solve the problem. Cheers!