Alex Chang Alex Chang - 3 years ago 212
CSS Question

Place two figure images side by side

So I am making this website where users can upload images of movies. I would like three images in a row, but each image is being placed under each other. Here is what my website currently looks like: image

How do I make them and other upcoming images side by side (well, three in every row)?

Here is my code for the images:

<?php
$sql = "SELECT * FROM movieimg";
$query = $mysqli->query($sql);

if ($query->num_rows > 0) {
while ($row = $query->fetch_array()) {
$id = $row['id'];
$movie_name = $row['name'];
$movie_img = $row['url'];
$movie_date = $row['m_date'];

echo "<figure class='container'><div
class='movie_img'><img id='" . $id . "' class='" . $id . "'
src='/images/movies/" . $movie_img . "' width='175' height='250'>
</div>";
echo "<div class='caption'><figcaption>" .
$movie_name . "</figcaption>";
echo "<figcaption>(" . $movie_date . ")
</figcaption></div></figure>";
}
} else {
echo "<div class='no-movies'>[ There are no movies yet! ]</div>";
}
?>


Here is my styling aka CSS:

.container {
width: 301px;
margin: 40px;
}
.movie_img {
display: block;
padding: 50px;
}


Again, how do I make the images and other upcoming images side by side? Thanks in advance.

Answer Source

section div {
  width : calc(33% - 12px);
  margin : 10px 10px 0 0;
  background : red;
  border : 1px solid #000000;
  height: 200px;
  float : left;
}

section div:nth-child(3n+1) {
  clear : left;
}
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download