Images Isn't Displaying Side By Side

[CodingStudent]

Hi friends, i have a problem. i am pulling data from database "image" and "headline". when i pulled second data, second image and headline are displaying below. See i added image. i want to display side by side.

<div class="row no-gutters" style="border:1px solid black;">
	<div class="col">
	
	
	<?php
	$resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
	?>

	<?php foreach ($resim as $resimkoy) { ?>

	<!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
	
	<!--
	<div class="row no-gutters" style="border:1px solid black;">
	-->
	
	<img style="max-width:266px;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>'><br>
	<div style="text-align:center; background-color:#17a2b8; color:#fff; max-width:266px;  max-height:35px; line-height:35px;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>

	</div>
	</div>

 

[requinix]

This is likely due to one or more CSS rules. Would have to see those to know what's wrong.

[cyberRobot]

Be default, the display property for <div> tags is set to "block". This means that a line break is added before and after the <div> tag.

Since it looks like you are trying to display a series of images with a text block below the photo, you could wrap both the image and the <div> tag with a parent <div> tag. Then using CSS to, you could float that parent div tag to the left.

For code examples, you could run a Google search for "css image gallery with captions".

[CodingStudent]

i changed codes that. you can see i added image. i want to put the captions under the images

 

<style>

figure {
  width:33%;
  float: left;
  position: relative;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  margin-right: 15px;
  margin-bottom: 1.35em;
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  
}
 
figcaption {
  width:99%;
  position: absolute;
  background: rgba(0,0,0,0.6);
  font-size: 1.2em;
  color: #fff;
  padding: 10px 16px;
  opacity: 0;
  
  bottom: 0%;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption a { color: #cce1ef; }

figcaption a:hover { color: #a9cbe1; }
 
figure:hover figcaption { opacity: 1; bottom: 5px; }
 
figcaption.light {
  background: rgba(255,255,255,0.6);
  font-size: 1.2em;
  color: #444;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption.light a { color: #60a7d7; }
figcaption.light a:hover { color: #4d92c0; }

#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
 
#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
#gallery { padding: 0px 15px; display: block; }


.baslik {
	height:35px;
	line-height:35px;
	text-align:center;
	border:1px solid black;
}


<!-- Yukarısı sil ve düzenle için -->


</style>

	<?php
	$resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
	?>

	<?php foreach ($resim as $resimkoy) { ?>

	
	<figure>
	<img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
	<figcaption>
	<div style="float:left;">Sil</div>
	<div style="float:right;">Düzenle</div>
	</figcaption>
	</figure>
	<div style="text-align:center;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>

 

[CodingStudent]

Hi, i put images side by side. When i give equal space with "margin-left" or padding-left, it is giving space for first image too. i am pulling images from database. i don't want to give "margin" for first image. See i added image.

<style>

	figure {
	  width:32.5%;
	  float: left;
	  position: relative;
	  padding-top: 3px;
	  margin-left:7px;
	  padding-bottom: 3px;
	  margin-bottom: 1.35em;
	  background: #fff;
	  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	  
	}
	 
	figcaption {
	  width:99%;
	  position: absolute;
	  background: rgba(0,0,0,0.6);
	  font-size: 1.2em;
	  color: #fff;
	  padding: 10px 16px;
	  opacity: 0;
	  
	  bottom: 0%;
	  -webkit-transition: all 0.44s ease;
	  -moz-transition: all 0.44s ease;
	  -o-transition: all 0.44s ease;
	  transition: all 0.44s ease;
	}

	figcaption a { color: #cce1ef; }

	figcaption a:hover { color: #a9cbe1; }
	 
	figure:hover figcaption { opacity: 1; bottom: 5px; }
	 
	figcaption.light {
	  background: rgba(255,255,255,0.6);
	  font-size: 1.2em;
	  color: #444;
	  -webkit-transition: all 0.44s ease;
	  -moz-transition: all 0.44s ease;
	  -o-transition: all 0.44s ease;
	  transition: all 0.44s ease;
	}

	figcaption.light a { color: #60a7d7; }
	figcaption.light a:hover { color: #4d92c0; }

	#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
	#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
	 
	#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
	#gallery { padding: 0px 15px; display: block; }
	

<!-- Yukarısı sil ve düzenle için -->


</style>

	<?php
	$resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
	?>

	<?php foreach ($resim as $resimkoy) { ?>

	
	<figure>
	<img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
	<figcaption>
	<div style="float:left;">Sil</div>
	<div style="float:right;">Düzenle</div>
	</figcaption>
	</figure>
	<?php } ?>

 

Edited September 9, 2020 by CodingStudent
i forgot adding the codes

[requinix]

On 9/8/2020 at 7:39 AM, CodingStudent said:

i changed codes that. you can see i added image. i want to put the captions under the images

Put both the image and the caption inside the container DIV and use CSS to make them both somewhat block-ish.

 

9 hours ago, CodingStudent said:

Hi, i put images side by side. When i give equal space with "margin-left" or padding-left, it is giving space for first image too. i am pulling images from database. i don't want to give "margin" for first image. See i added image.

Give the container DIV an equal negative left margin so that it looks like there's no margin on the first image.