Geek Answers Handbook

CSS displaying elements vertically down instead of a horizontal line

I have elements that are wrapped inside a div. Elements are displayed horizontally inside the div. The problem is that I cannot figure out how to display elements vertically down. I did some research and one solution was to use vertical alignment, but it doesn't seem to work.

Here is an example of what I'm trying to accomplish

http://s9.postimg.org/6i34jzazz/save.jpg

My css

.container {height:500px; width: 700px; background-color:#00B358}

My html

  <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/navigation.css"> </head> <div class="container "> <img border="0" src="download.jpg" alt="Pulpit rock" width="304" height="228"> <img border="0" src="1.jpg" alt="Pulpit rock" width="304" height="228"> <img border="0" src="2.jpg" alt="Pulpit rock" width="304" height="228"> </div>
+7
source share
3 answers

I do not think that you can achieve what you are trying to do without reorganizing the markup. Most likely you will have to put your divs in column containers (at least until flexbox is widely used!).

Quick example:

HTML:

 <div class="container"> <div class="col-1"> <img border="0" src="download.jpg" alt="Pulpit rock"> <img border="0" src="1.jpg" alt="Pulpit rock"> </div> <div class="col-2"> <img border="0" src="1.jpg" alt="Pulpit rock"> </div> </div>

CSS:

 img { display: block; } .container > div { float: left; }

Explaination:

The natural flow, if elements are embedded, should appear next to each other until a line break is required. If the items are block level, they will always be displayed below the previous item. Another option is to move the elements, but it will appear again next to the first element, if there is a place, not at the bottom.

That's why you have to set up your layout to group the elements you want in a vertical line, and then place the next group next to it.

+7
source

You need to set the images in your div to display: block; not sure if this is below, this is the correct format for the "element type" inside the "class", but it should point you in the right direction.

This puts the images under each other.

.box1 img {display: block;}

0
source

I did some research and found column-count that works if you have a modern browser

 -moz-column-count -webkit-column-count column-count

you may want to play with column-count , but it should work for your purpose, and you may also encounter column-width to achieve the desired result you want.

 -moz-column-width -webkit-column-width column-width

JsFiddle example

column counting browsers

Aspect list: multi-column

you may need to do a js / html conditional check for older browsers to create the same effect

0
source

More articles:


All Articles