is it posible to have all items in parent div in in columns

Question

I have a div and i want all items in this div to be shown in the same row.

Here is my html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div class="parent-div">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
    </div>
</body>
</html>

I want them to always show in rows even when the parent div is not big enough.

Is it possible to use a table instead? And then inside each `` element you'd add your divs? — Da Mahdi03, Jan 05 '21 at 16:15

score 0 · Accepted Answer · answered Jan 05 '21 at 16:15

You need to use flex for .parent-div rules. Add this to your css:

.parent-div {
  display: flex;
}

.parent-div {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div class="parent-div">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
    </div>
</body>
</html>

score 0 · Answer 2 · answered Jan 05 '21 at 16:20

0

You could make the parent div flex:

.parent-div {
  display: flex;
}

.parent-div {
display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div class="parent-div">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
    </div>
</body>
</html>

answered Jan 05 '21 at 16:20

John

5,132
1
6
17

1

how is your answer different from my answer? – s.kuznetsov Jan 05 '21 at 16:23
@s.kuznetsov Because you originally gave an answer to display all the children as `inline-block` and it seems you changed your answer to match mine. – John Jan 05 '21 at 16:26
jaja, no, I did not repeat after you. Later I read this from the author's question - *"I want them to always show in rows even when the parent div is not big enough"*. And gave the answer with a `flex` for the parent. – s.kuznetsov Jan 05 '21 at 16:40

is it posible to have all items in parent div in in columns

2 Answers2