Databases
StackOverflow2013
Postsdbo
POTrying to distribute images evenly with css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to distribute images evenly with css
    primarykey
    data
    text
    <p>Im trying to create a slide of small images and that on each slide the images are evenly distributed horizontally. Found an <a href="http://css-tricks.com/equidistant-objects-with-css/" rel="nofollow">interesting technique</a> on css-tricks.com and a very straighforward <a href="http://codepen.io/chriscoyier/pen/nfyGk" rel="nofollow">working example</a> but i haven't been able to replicate it.</p> <p>Here's the html of a slide</p> <pre><code>&lt;div class="item active"&gt; &lt;div&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here's the css following the mentioned technique</p> <pre><code>div.sites .carousel-inner .item div { font-size: 0.1px; text-align: justify; } div.sites .carousel-inner .item div:after { content: ""; width: 100%; display: inline-block; } div.sites .carousel-inner .item div a { display: inline-block; } </code></pre> <p>You can see the code working at the bottom of <a href="http://activomultimedia.com/husj/" rel="nofollow">this site</a>, under the title "OTROS SITIOS"</p> <p><strong>EDIT</strong>: My girlfriend tried <a href="http://s.codepen.io/anon/pen/oBsDd" rel="nofollow">my code in CodePen</a> and it worked nicely. im guessing it must be some global style that's interfering with it.</p> <p>Thanks for your help</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKara
    1. USkumiau
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODifficult to tell what you are asking for, but changing `text-align: justify` to `text-align: center` makes the list of 100x100 images all centered...? The slider works pretty nicely after that.
      singulars
      1. POTrying to distribute images evenly with css
      1. USmash
    2. COWhat i'm trying to do is for the images to distribute evenly in the horizontal space. Like when you justify a text that all the words distribute across the line. You can check the working example in the question to see a demo of what im trying to do.
      singulars
      1. POTrying to distribute images evenly with css
      1. USkumiau
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload