Placing divs horizontally-CodePudding

I have this div in my html code and it automatically repeate in the webpage because I fetch data from database. But it displays that vertically and I want it to be horizontally.

I tried using different css properties like inline-block, float and flex-direction none of them seems to work.

This is the html code that I have

    <div >
    <figure>

        <div >
            <h3> <?php echo $row['title'];  ?> </h3>

            <p style="inline-size: 600px; "> <?php echo $row['description'];  ?> </p>
        </div>

    </figure>
    </div>

and this is the css

body{
    padding: 0;
    margin: 0;
    font-family: 'Rubik','Noto Sans Arabic', sans-serif;
    color: #444444;
}

.slider{
    overflow: hidden;
    width: 100%;
    height: 200px;
}


.img-container{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

.slider figure{
    position: relative;
    margin: 0;
    width: 500%;
    animation: entrance 1s ease 0s 1 normal forwards;
}

@keyframes entrance{
    
  0% {
    opacity: 0;
    transform: translateX(-250px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

    
}

I don't know if it's not working because I only have one div in my code. If so, can you please tell me how I can do this otherwise? because I did try to add more than one and it's not working either.

CodePudding user response：

Assuming you want to display horizontally and equally spaced you can do something like this. Also, I'm explicitly setting figure margin and padding as 0 but you can modify a/q to your needs. This is just to show how to place elements horizontally.

body,figure {
  margin: 0;
  padding: 0;
}

figure {
  display: flex;
  width: 100%;
  gap: 10px;
  border: 1px solid black;
  justify-content: space-evenly;
}

<figure>
  <div >
    <h3>Dummy</h3>
    <p> This is a para</p>
  </div>
  <div >
    <h3>Dummy</h3>
    <p> This is a para</p>
  </div>
  <div >
    <h3>Dummy</h3>
    <p> This is a para</p>
  </div>
</figure>

CodePudding user response：

you set overflow: hidden; in your .slider class. and .img-container class you set to 100vh witch takes all your screen.

try to remove this properties and define the <figure> element as: display:flex; flex-direction:column;

CodePudding user response：

Use flex. do you want like this?

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Rubik', 'Noto Sans Arabic', sans-serif;
  color: #444444;
}

.slider {
  overflow: hidden;
  width: 100%;
  height: 20vh;
  border: solid red;
}

.img-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  border: solid;
}

h3 {
  border: solid yellow;
  margin: 0;
  width: 50%;
}

p {
  border: solid green;
  margin: 0;
  width: 50%;
}

.slider figure {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  animation: entrance 1s ease 0s 1 normal forwards;
}

@keyframes entrance {
  0% {
    opacity: 0;
    transform: translateX(-250px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

<body>
  <div >
    <figure>

      <div >
        <h3> some title </h3>

        <p> some description </p>
      </div>

    </figure>
  </div>
</body>