0

Olá tenho uma pagina onde seus blocos(borda azul e vermelho)(de tamanho diferente) ficam com o topo desnivelado, como poderia resolver este problema?

Imagem: inserir a descrição da imagem aqui

Código HTML respectivo:

<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>

Css aplicado:

.star_block{
    display:inline-block;
    text-align:left;
}
.dscription_block{
    display:inline-block;
    text-align:left;
}
1

1 Resposta 1

1

Parceiro, se você estiver usando o bootstrap, você dificilmente precisará escrever alguma coisa em CSS, a menos que queira alterar cor e fonte. Questões de alinhamento, margens e etc... o nosso amigo faz tudo pra nós! =)

tente o seguinte:

<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>

Se quiser que o conteúdo ocupe toda a tela, basta tirar a primeira DIV (container). Se quando você tirar a div container, aparecer barra de rolagem inferior, basta trocar as classes row por row-fluid

Espero ter ajudado =)

9
  • ,@thomasLima no código que postei havia col-md-4" para <a href="#" class="thumbnail"> pois a imagem poderia ter tamanho variavel
    – Ricardo
    Commented 22/01/2015 às 15:45
  • Ricardo, no seu código não encontrei o col-md-4! Note que no código que postei, fiz justamente isso, ele tem um col-md-4. Além disso, você ainda pode usar a classe img-responsive na tag img, isso também faz a imagem se ajustar a tela Commented 22/01/2015 às 15:47
  • Desculpe escrevi errado, seria não havia col-md-4" para <a href="#" class="thumbnail"> pois a imagem poderia ter tamanho variavel
    – Ricardo
    Commented 22/01/2015 às 15:49
  • Tudo que tiver dentro da col-md-4, vai se ajustar ao tamanho da div. Exemplo: se você colocar uma imagem com 1920x1080px, ela vai se ajustar ao tamanho daquela div. Ou seja, não importa o tamanho da sua imagem, ela vai se ajustar na div. Se quiser deixar maior ou menor, basta alterar o número de colunas: col-md-3, col-md-5. Só lembrando que se você aumentar ou diminuir essa div, você precisa alterar a div da direita para que ambas fechem em 12. Commented 22/01/2015 às 15:53
  • Este é o problema o tamanho da imagem não pode ser alterado logo ela não tinha um col-md, e a div a direita sim e um float none para ela permanecer a direita pois se nao tive-se ela tomaria o lugar da primeira ficando na esquerda
    – Ricardo
    Commented 22/01/2015 às 15:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .