Align the top of Divs (Bootstrap)

Asked

Viewed 2,430 times

0

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

Imagery: inserir a descrição da imagem aqui

Respective HTML code:

<div class="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;
}
html css twitter-bootstrap bootstrap-3

  • I tested this code in Fiddle and it was not as in the picture. See there: http://jsfiddle.net/DTcHh/

1 answer

2


Partner, if you’re using bootstrap, you’ll hardly need to write anything in CSS unless you want to change color and font. Alignment issues, margins and so on... 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 out the container div, appear bottom scroll bar, just exchange the Row classes for Row-Fluid

I hope I’ve helped =)

  • ,@thomasLima in the code I posted had col-Md-4" for <a href="#" class="thumbnail"> because the image could have variable size

  • Ricardo, in your code I did not find col-Md-4! Note that in the code I posted, I did just that, he has a col-Md-4. Also, you can still use the img-Responsive class in the img tag, it also makes the image fit the screen

  • Sorry I misspelled, would there be no col-Md-4" for <a href="#" class="thumbnail"> because the image could have variable size

  • Anything inside the col-Md-4 will fit the size of the div. Example: if you put a 1920x1080px image, it will adjust to the size of that div. That is, no matter the size of your image, it will fit in the div. If you want to leave more or less, just change the number of columns: col-Md-3, col-Md-5. Just remember that if you increase or decrease this div, you need to change the right div so that both close at 12.

  • This is the problem the size of the image cannot be changed so it did not have a col-Md, and the right div yes is a None float for it to stay right because if it did not have itself it would take the place of the first getting on the left

  • Okay, so if there are images larger than the div, what should happen? the div adjust, or stay part of the hidden image?

  • will push the red div to the right, if establishing a col-Md will resize the image if it is large

  • In this case, couldn’t you put the image and the text inside the same div, putting a align='left' on the image? Since the Divs will be proportional to the content. I don’t know what your goal is, but if you’re going to create a list of videos, one below the other, with thumbnail on the left and description on the right, it wouldn’t be more interesting if you standardized the sizes of the 2 columns, so that the content is aligned?

  • I added a pull-left to star_block, and left it in the format I wanted

Show 4 more comments

Browser other questions tagged html css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.