How to place 4 divs 2 on each line?-CodePudding

Given the following divs

<body>
    <div id="f1">{{ f1|safe }}</div>
    <div id="f2">{{ f2|safe }}</div>
    <div id="f3">{{ f3|safe }}</div>
    <div id="f4">{{ f4|safe }}</div>
</body>

I need to have 2 on each line in a way they auto-resize in both directions with a screen resize. I tried style="flex-direction: row" it's not working and even if it does, the problem arises in the 3rd div which should be below the previous 2 followed by the last on the same row again. The positions should resemble the below.

CodePudding user response：

.container {
  display: grid;
  grid-template-columns:auto auto;
  background-color: DodgerBlue;
}

.container > div {
height: auto;
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<body>
<div >
    <div id="f1">{{ f1|safe }}</div>
    <div id="f2">{{ f2|safe }}</div>
    <div id="f3">{{ f3|safe }}</div>
    <div id="f4">{{ f4|safe }}</div>
</div>
</body>

You can use grid property to span across horizontally:

display: grid;
grid-template-columns:auto auto;

And you can define height to span across vertically.

CodePudding user response：

<body>
    <table width=100% border=0 cellspacing=0 cellpadding=0><tr><td>
    <div id="f1" style="background-color:red;">{{ f1|safe }}</div>
    </td><td>
    <div id="f2" style="background-color:green;">{{ f2|safe }}</div>
    </td></tr><tr><td>
    <div id="f3" style="background-color:blue;">{{ f3|safe }}</div>
    </td><td>
    <div id="f4">{{ f4|safe }}</div>
    </td></tr></table>
</body>

CodePudding user response：

better go with bootstrap below if you want only this for div to be placed

<style>
div{ width: 50%; display : block; float : left; }
</style>
<body>

<container>
    <div id="f1" >{{ f1|safe }}</div>
    <div id="f2">{{ f2|safe }}</div>
    <div id="f3">{{ f3|safe }}</div>
    <div id="f4">{{ f4|safe }}</div>
<container>
</body>

CodePudding user response：

<div >
        <div >
            <div id="f1">{{ f1|safe }}</div>
        </div>
        <div >
            <div id="f2">{{ f2|safe }}</div>
        </div>
        <div >
            <div id="f3">{{ f3|safe }}</div>
        </div>
        <div >
            <div id="f4">{{ f4|safe }}</div>
        </div>
    </div>