Databases
StackOverflow2013
Postsdbo
POCSS - "Reverse" Floating of Elements - how keep them at the bottom?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS - "Reverse" Floating of Elements - how keep them at the bottom?
    primarykey
    data
    text
    <p>I'm currently facing an interesting CSS issue for which I couldn't find anything related on the web. I know it must be solvable, perhaps you guys crack the nut.. (?)</p> <p>Following problem: I need to display some icons in front of an image positioned at the bottom left. As the number of icons can vary, the icons are floated next to each other (max. three per row - defined by the width properties).</p> <p>Here's my HTML code (the div containing the icons is positioned absolute over an image):</p> <pre><code>&lt;div class="labels"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="image1.png" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="image1.png" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="image1.png" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="image1.png" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="image1.png" /&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p></p> <p>And the related CSS:</p> <pre><code>.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; } .labels ul { display: block; min-height: 20px; overflow: auto; width:210px; } .labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; } </code></pre> <p>To get you a picture what it looks like and what the goal is i've scratched it up for you: see here (I'm not allowed to upload images..): <a href="http://www.zois.ch/temp/issue-scratch.png" rel="noreferrer">link text</a></p> <p>As you can see the icons are floated left, but obviously starting at the top. That's not nice, because I want the floating kind of reverse starting from the bottom left, filling the width of the ul-element and continue the floating on the next row up.</p> <p>Any idea how to solve this? Any help is highly appreciated!!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USsquarehouse
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS - "Reverse" Floating of Elements - how keep them at the bottom?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS - "Reverse" Floating of Elements - how keep them at the bottom?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS - "Reverse" Floating of Elements - how keep them at the bottom?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COVery interesting question. I'm definitely in the process of finding an elegant solution.
      singulars
      1. POCSS - "Reverse" Floating of Elements - how keep them at the bottom?
      1. USRyan Kinal
 

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