position several floating divs aligned in a container

Question

position several floating divs aligned in a container

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I am learning and I need to dynamically load several images, it can be 1 or 50, in the example I made a short loop with several floating divs to explain my problem. I need the divs to be aligned with the exact same space each other, the divs have fixed width and height (I will upload images inside) and the idea is that if I shrink the browser the spaces or horizontal margins between them will be recalculated, ie those that fit, are centered, and those that do not fit pass to a second line inside the container, aligned like the first. Maybe it is not the form and you should use jquery or javascript, you would need an example to start, study and adapt it.

The code for index.php:

<html>
	<head>
		<LINK REL="stylesheet" TYPE="text/css" HREF="css/estilo.css">
	</head>
	<body>
		<div id="contenedor">
		<?php 
		for ($i = 1; $i <= 10; $i++) {
    	?>
    		<div class="marcos">
    			<div class="fotos"></div>
    		</div>
		<?php
			}
		?>
		</div>

	</body>
</html>

the style sheet:

* {
	margin:0px;
	padding:0px;
}

body {
	text-align: center;
	margin: 0 auto;
	overflow: auto;
}

#contenedor {
	max-width: 910px;
	min-width: 240px;
	text-align: center;
	margin: 0 auto;
	border: 1px solid blue;
	overflow: hidden;
}

.marcos {
	float:left;
	width: 180px;
	height: 220px;
	border: 1px solid black;
	overflow: hidden;
}

.fotos {
	text-align: center;	
	margin: 9px 9px;
	width: 160px;
	height: 200px;
	border: 1px solid orange;
}

jquery php

asked by look68 10.03.2017 в 03:16

source

2 answers

Doubt with the internal structure of sockaddr_in What do the entity, control and interface classes refer to?

score 2 · Answer 1

Using flexbox can help you. Here is a Fiddle with some modifications I made to your code.

In summary, I modified the CSS of #contenedor

#contenedor {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  /* ... Los demás atributos se mantienen igual */
}

In CSS-Tricks there are information on flexbox , with diagrams and examples. It works well in modern browsers, as detailed in CanIUse.com .

score 0 · Answer 2

		* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0 auto;
}

#contenedor {
  max-width: 700px;
  min-width: 240px;
  border: 1px solid blue;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.marcos {
  width: 180px;
  height: 220px;
  border: 1px solid red;
}

.fotos {
  margin: 9px 9px;
  width: 160px;
  height: 200px;
  border: 1px solid orange;
}

 <div id="contenedor">
    <?php 
         for($i=1; $i<10; $i++){
          $html ='
                <div class="marcos">
                  <div class="fotos"></div>
                </div>';
           echo $html;
          }
         
      ?>
  </div>

This will be executed