html5垂直对齐3个Divs等距排列

Question

the right Div on my html-page contains only some rows of thumnails - created dynamically in javascript - while the left Div contains 3 Sub-Divs (inner Divs) arranged vertically (also dynamically created on receiving my query-result from my webService)

In order to make it look balanced I want the left Div to automatically adjust to the same height as the right one (which holds the dynamically inserted thumbnails).

The 3 vertical aligned Sub-Divs in the left Div should behave like this:

Div2 with the larger Image should be vertically centered

Div1 with the header text should be vertically centered in the space above Div2

Div3 with the title text should be vertically centered in the space below Div2

.

question:

is this possible with css ? - ie without calculation of the heights on dynamic creation in javascript

.

if this is possible with css then, please, give me some hints about which float, display, align, margin (and similar) settings I could try for the left Container Div and for its 3 inner Divs.

I do not need to get a sample or a solution resp. but I need some hints in plain words, some ideas that I could try out, and some considerations (tipps) which I should obey.

many thanks in advance.

Answer 1

Flexbox can do what you need:
jsfiddle: https://jsfiddle.net/ornx7oar/

 .main { display: flex; } .left-panel { padding: 5px; margin-right: 5px; background-color: green; /*width: 30%;*/ flex: 0 0 30%; /* don't grow or shrink based on contents, 30% width (put auto if you prefer to use the width property) */ display: flex; flex-direction: column; /* align vertically */ justify-content: space-around; /* center vertically */ } .right-panel {} .thumb {height: 70px; width: 150px; border: 1px solid; display: inline-block;} * { box-sizing: border-box; margin: 0; } 

 <div class="main"> <div class="left-panel"> <div>first</div> <div>second</div> <div>third</div> </div> <div class="right-panel"> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> </div> </div> 

Answer 2

I would add the same class to all three divs. In your css, add margin: 10px auto; Depending on the current code you might need to add position: relative to this class as well.

You can tweak the 10px part depending on how far apart you want them. The auto centers the divs to its parent.

As far as changing the order look at w3 schools documentation on order