Align the top of divs (Bootstrap)

Navigation
0

Hello, I have a page where your blocks (blue and red border) (of different size) are with the top uneven, how could you solve this problem?

Picture:

RelatedHTMLcode:

<divclass="row">
                <div id="conteudo" class="col-md-12 span7 text-center"><!-- START Video Content -->
                    <div class="star_block" style="border:2px solid blue">
                        <a href="#" class="thumbnail">
                            <img src="../../images/temp/13.jpg"
                            alt="Video"/>
                        </a>
                    </div>
                    <div class="description_block col-md-8" style="border:2px solid red;float:none">
                        <span class="name">info</span><span class="country">value</span><br />
                        <span class="info">info</span><span class="value">value</span><br />
                        <span class="info">info</span><span class="value">value</span><br />
                        <span class="info">info</span><span class="value">value</span><br />
                        <span class="info">info</span><span class="value">value</span><br />
                        <span class="info">info</span><span class="value">value</span><br />
                    </div>
                </div>
            </div>

Applied CSS: 

.star_block{
    display:inline-block;
    text-align:left;
}
.dscription_block{
    display:inline-block;
    text-align:left;
}
    
asked by anonymous 22.01.2015 / 15:32

1 answer

2

Partner, if you are using the bootstrap, you will hardly need to write anything in CSS unless you want to change color and font. Questions of alignment, margins and etc ... our friend does everything for us! =)

try the following: 

<div class="container">
    <div class="row" style="border:1px solid #000;">
        <!--BORDA PRETA-->
        <h1>CABEÇALHO</h1>
    </div>
    <div class="row">
        <div class="col-md-4" style="border:1px solid #00F">
            <!--BORDA AZUL-->
            <a href="#" class="thumbnail">
                <img src="../../images/temp/13.jpg"
                alt="Video"/>
            </a>

        </div>
        <div class="col-md-8" style="border:1px solid #f00">
            <span class="name">info</span><span class="country">value</span><br />
            <span class="info">info</span><span class="value">value</span><br />
            <span class="info">info</span><span class="value">value</span><br />
            <span class="info">info</span><span class="value">value</span><br />
            <span class="info">info</span><span class="value">value</span><br />
            <span class="info">info</span><span class="value">value</span><br />
        </div>
    </div>
</div>

If you want the content to occupy the entire screen, just take the first DIV (container). If when you take the container div, the bottom scroll bar appears, just swap the row classes by row-fluid

I hope I have helped =)

    
22.01.2015 / 16:13
How do I add an animation while loading a request? Parameter in URL is coming null