Przyklejenie obrazka do gory

Question

WItam. 
Mamp problem z przyklejeniem obrazka do góry elementu:

zależy mi na tym żeby ten monitor swoją górną częścią był na równi z tym niebieskim podkreśleniem.

 

  <div id="bottom-bar1">
                <div id="six-elements">
                    <div class="bottom-bar-element">
                       
                        <span class="bottom-bar-element-img">
                            <img src="img/images/monitor.png">
                        </span>
                        
                        <div class="bottom-bar-content">
                            <h4>high resolution</h4>
                            <p>Lorem ipsum dolorsit amen adipisic ng elit, sed do euismod tempor incididunt ut labore et</p>
                        </div>
                        
                        <div style="clear: both;"></div>
                    </div>
                 </div>
             </div>

 

Comments

Po pierwsze primo nie używaj stylowania w HTML, czyli wywal "style='clear...." i umieść to w kodzie CSS, a po drugie proponuję abyś wstawił kod html wraz z css np. na codepen lub jsfiddle, aby od razu można było zobaczyć w czym problem i spróbować go poprawić.

Alternatywnie wrzuć swój kod CSS, bo bez niego to w zasadzie trzeba tworzyć wszystko samemu od podstaw :)

Answer 1

vertical-align: text-top;

Comments

Jak to prawidłowo połączyć z float: left albo display: inline-block ?

---

to dotyczy obrazu...

.klasa img

{vertical-align: text-top;}

Answer 2

Witam. Nie ma co prawda css ale myślę, że po prostu użyj float: left; dla obrazka. Bez  div  clear: both;

Answer 3

Dokładnie, jak napisał Tomek - wstaw kod na codepena! ;) Na szybko osiągnąłem takie coś: [KLIK]. Można by się jeszcze bawić w display: table, ale moim zdaniem jest to bardziej karkołomne. Tutaj za pomocą flexboxa raz dwa osiągnąłem rezultat który chciałeś :)