Align height 3 Divs in a row - bootstrap

Asked

Viewed 852 times

3

I have 3 Ivs on a Row, but some get different heights according to the contents of the div.

How to standardize the height of the div. (I do not want to fix height but rather that they are the same height.)

My html:

<div class="row-services-1">
    <div class="container">
        <div class="row row-same-height">
            <div class="col-md-12">
                <div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div>
            </div><!-- /.col-md-12 -->                                        

            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/5-1506976704.jpg&amp;w=1920&amp;h=600" alt="PINTURAS / TEXTURAS" title="PINTURAS / TEXTURAS">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">PINTURAS / TEXTURAS</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Pinturas e Texturas
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/6-1506976743.jpg&amp;w=1920&amp;h=600" alt="TELHADO" title="TELHADO">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">TELHADO</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de telhados
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/4-1506976664.jpg&amp;w=1920&amp;h=600" alt="ASSENTAMENTO / REVESTIMENTOS" title="ASSENTAMENTO / REVESTIMENTOS">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ASSENTAMENTO / REVESTIMENTOS</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Assentamentos de revestimentos
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px">
                </div>
            </div><!-- /.col-md-4 -->
        </div>

        <div class="row row-same-height">
            <div class="col-md-12">
                <div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div>
            </div>
        <!-- /.col-md-12 -->                                        

            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/2-1506976574.jpg&amp;w=1920&amp;h=600" alt="ADEQUAÇÃO HIDRÁULICA" title="ADEQUAÇÃO HIDRÁULICA">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ADEQUAÇÃO HIDRÁULICA</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de adequação Hidráulica
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/3-1506976625.jpg&amp;w=1920&amp;h=600" alt="ALVENARIAS / CONCRETAGEM" title="ALVENARIAS / CONCRETAGEM">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ALVENARIAS / CONCRETAGEM</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de alvenarias e concretagem
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/1-impermeabilizacao-1506976478.jpg&amp;w=1920&amp;h=600" alt="Impermeabilização" title="Impermeabilização">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">Impermeabilização</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Impermeabilização
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->
        </div>                                   
    </div><!-- /.container -->
</div>

inserir a descrição da imagem aqui

bootstrap div

  • Place a sample of the code of these 3 Ivs.

  • added html

2 answers

2

I would say that the simplest way is that for your case where the content is not would be to fix a minimum height with min-height, thus:

.precos .col-md-4 {
    padding: 15px;
}
.item {
    min-height: 400px;
    border: 1px #ccc solid;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="precos row">
  <div class="col-md-4">
      <div class="item"></div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
</div>

Using Flex

As this link you can use the http://getbootstrap.com.vn/examples/equal-height-columns/ which is an experiment, has not been implemented (http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css), should look like this:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  justify-content: space-around;
}

.row-eq-height [class*="col-xs-"] {
    width: 100%;
}

.item {
    height: 100%; /*acompanha a altura do pai*/
    border: 1px #ccc solid;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="precos row row-eq-height">
  <div class="col-md-4">
      <div class="item">
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
      </div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
</div>

Related

Related Posts:

  • This is not a good one. By being a responsive layout, it will give display problem.

  • @Dvdsamm like it’s not? of course it is, the content is fixed, even if the layout is responsive the content as the AP illustration is a static content, that is, what changes in responsiveness is only the columns and not their content. Anyway for cases of dynamic maintenance there is row-eq-height, as a response edition.

  • Using min-height You are basing it on the div that will be taller, ok! The others, of lesser height, will have an empty space at the bottom. This is OK if the Divs are side-by-side as in the question image, but if you open it on a smartphone, the Divs should be one under the other, and it is very bad a div with a white space at the bottom. I don’t know if you understand.

  • @Dvdsamm this has nothing to do with responsiveness, anyway even if it opens on a small screen if the AP so wish that heights "vary" again it resolve with a media-query (@media) to be applied min-height: 1px;, But anyway in the smartphone the effect of these columns will remember "sections", so the sections can have some minimum. I used a large value, but AP can adjust min-height as you like.

  • Better use flex even.

  • @Dvdsamm using flex for something that is dynamic is great, for something that is static and that if you look at the image you will notice that there is little difference (must be between 10 and 12 pixels difference), even in mobile would not feel difference. Another thing the use of flex was tip only, if apply flex it loses all the features of the responsive "breaking on the screen as needed", ie in addition to flex it will need the media-query, I think using all this for 10 pixels is the same as using a cannon to kill ants. If it’s dynamical content it’s worth it, if it’s static it’s not.

  • Blz. Using min-height and @media together can get up to good.

  • The contents of Ivs are dynamic. So it wouldn’t be interesting to set a height As for flex, as it is a bootstrap template, I think it will give problem in responsiveness...

  • They don’t seem dynamic to me, you know what dynamical means right? Anyway see the solution with flex that is in the answer. PS: use the comment field to talk, the add answer button is for problem resolution.

  • Correct me if I’m wrong, but I understand that dynamic is when looking for direct results from the bank, and not bringing static content for example in the html itself. Ah, I get very confused about the feedback and response dynamics here at stackoverflow... Sorry. I’ll try flex

  • yes this correct, but it is mainly that content which you have no control, which can vary a lot. As your Divs all have the know more, I think the text is always limited and the rest is seen in after you click the button, so you do not need to appeal to Flex for something simple, if it is simple use the simple. There’s no reason use a cannon to kill ants.

  • @Guilherme Nascimento I tried the flex as instructed but disfigured everything... Maybe I didn’t know how to fit the example in the code. link

  • @Jardel I’m going to review this, anyway it seems to me too little difference of pixels for you to want to opt for the flex instead of a simple height. As soon as I’m done I’ll let you know.

  • @Jardel example edited, I believe that anyway to work with the native responsiveness of Bootstrap will not be a good one. I really think your Divs have very little text for you to worry about Flex, use when necessary and in the case you are using clearly will not be Giant Ivs contrasting with minute Ivs, there is no reason to use something complex to solve something simple.

  • @Dvdsamm I did as @Guilherme Nascimento suggested and it worked: .wprt-image-box.has-shadow .item .inner { min-height: 400px; Will you be able to adapt your script now that we know which selector applies the height???

  • @Jardel I’ll take a look here.

Show 11 more comments

2


A solution (although not on the list of tags question) would be a jQuery function:

<script>
$(window).on("load resize", function(){
    div_inner = $(".wprt-image-box.has-shadow .item .inner");
    if(div_inner.eq(0).width() >= window.innerWidth/2){
        div_inner.css("height","auto");
    }else{
        max_height = 0; div_col = 3; contador = 1; loop = 1;
        div_inner.css("height","").each(function(){
            if($(this).height() > max_height){
                max_height = $(this).height();
            }
            if(contador == div_col){
                for(x=(div_col*loop)-div_col;x<div_col*loop;x++){
                    div_inner.eq(x).css("height",max_height+"px");
                }
                max_height = 0; contador = 1; loop++;
            }else{
                contador++;
            }
        });
    }
});
</script>

The above script matches the height of all the div .item whichever has the greater height in each row.

$(window).on("load resize", function(){
	div_inner = $(".wprt-image-box.has-shadow .item .inner");
	if(div_inner.eq(0).width() >= window.innerWidth/2){
		div_inner.css("height","auto");
	}else{
		max_height = 0; div_col = 3; contador = 1; loop = 1;
		div_inner.css("height","").each(function(){
			if($(this).height() > max_height){
				max_height = $(this).height();
			}
			if(contador == div_col){
				for(x=(div_col*loop)-div_col;x<div_col*loop;x++){
					div_inner.eq(x).css("height",max_height+"px");
				}
				max_height = 0; contador = 1; loop++;
			}else{
				contador++;
			}
		});
	}
});
.wprt-image-box.has-shadow { margin: 0 -15px; }
.wprt-image-box.has-shadow .item { padding: 0px 15px 30px; }
.wprt-image-box.has-shadow .item .inner { background-color: #fff; -webkit-box-shadow: 0px 5px 300px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row-services-1">
                    <div class="container">

                            <div class="row row-same-height">
                            	<div class="col-md-12">
                                	<div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px">
                                    </div>
								</div><!-- /.col-md-12 -->                                        

                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/5-1506976704.jpg&amp;w=1920&amp;h=600" alt="PINTURAS / TEXTURAS" title="PINTURAS / TEXTURAS">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">PINTURAS / TEXTURAS</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Pinturas e Texturas                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/6-1506976743.jpg&amp;w=1920&amp;h=600" alt="TELHADO" title="TELHADO">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">TELHADO</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de telhados                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/4-1506976664.jpg&amp;w=1920&amp;h=600" alt="ASSENTAMENTO / REVESTIMENTOS" title="ASSENTAMENTO / REVESTIMENTOS">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ASSENTAMENTO / REVESTIMENTOS</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Assentamentos de revestimentos nossos serviços de Assentamentos de revestimentos                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->
                                                </div><div class="row row-same-height"><div class="col-md-12"><div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div></div><!-- /.col-md-12 -->                                        

                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/2-1506976574.jpg&amp;w=1920&amp;h=600" alt="ADEQUAÇÃO HIDRÁULICA" title="ADEQUAÇÃO HIDRÁULICA">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ADEQUAÇÃO HIDRÁULICA</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de adequação Hidráulica                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/3-1506976625.jpg&amp;w=1920&amp;h=600" alt="ALVENARIAS / CONCRETAGEM" title="ALVENARIAS / CONCRETAGEM">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ALVENARIAS / CONCRETAGEM</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                         Confira todos nossos serviços de alvenarias e concretagem                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/1-impermeabilizacao-1506976478.jpg&amp;w=1920&amp;h=600" alt="Impermeabilização" title="Impermeabilização">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">Impermeabilização</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Impermeabilização                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->
                                                </div>                                   

                    </div><!-- /.container -->
                </div>

  • It didn’t roll... Look at the picture link

  • @Jardel Which div has the shadow?

  • @Jardel Try changing the dial to .wprt-image-box .item.

  • did not work. You use boot 4 and I 3. <script>&#xA;$(window).on("load resize", function(){&#xA; $(".wprt-image-box .item").css("height","").each(function(){&#xA; $(this).css("height",$(this).closest(".col-md-4").height()+"px");&#xA; });&#xA;});&#xA;</script>&#xA; .wprt-image-box.has-shadow { margin: 0 -15px; }&#xA;.wprt-image-box.has-shadow .item { padding: 0px 15px 30px; }&#xA;.wprt-image-box.has-shadow .item .inner { background-color: #fff; -webkit-box-shadow: 0px 5px 300px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); }

  • I did what Guilherme Nascimento indicated and it worked: .wprt-image-box.has-shadow .item .inner { min-height: 400px;} Now I found the selector. How to adapt in your script to work as well, because in your script it is automatic and do not need to fix the size.

  • @Jardel I updated the code. Run a test there.

  • fell like a glove. Perfect. Solved the problem. Thank you very much!!!

Show 2 more comments

Browser other questions tagged bootstrap div

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