How to put responsive Ivs regardless of height size?

Asked

Viewed 481 times

4

I have a Bootstrap project with 4 Divs on each line, side by side behaving responsibly. Each of the Divs has a certain content. The width of the images will be fixed but the height will not. If one of the images is larger height, the rest of the contents of the other Ivs behaves strangely, according to image:

Is there any way to change this? Deep down I intend that regardless of the size of the height, the Divs always have the same distance between them by decreasing the screen size/browser. At this point, if you increase the height of an image, the bottom is a giant distance from the top.

My html:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>SmartEvents</title>
        <meta name="description" content="A Tuts+ course">
        <!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="css/custom.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="content">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento1a.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">DJ Precatado Tour Smart 2015</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Música</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Meo Arena</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento2.jpg" />
                            <div class="events-cost">20.00€ - 45.00€</div>
                            <div class="events-name">Vinil e K7. Passado e futuro.</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Conferências</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Armazém 77</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Comprar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento4.jpg" />
                            <div class="events-cost">2.500€</div>
                            <div class="events-name">Windows 28 - Como entrar?</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chalet suiço Bill Gates</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Comprar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">2.500€</div>
                            <div class="events-name">Windows 28 - Como entrar?</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chalet suiço Bill Gates</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Comprar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a>
                        </li>
                        <li class="active"><a href="#">1</a>
                        </li>
                        <li><a href="#">2</a>
                        </li>
                        <li><a href="#">3</a>
                        </li>
                        <li><a href="#">4</a>
                        </li>
                        <li><a href="#">5</a>
                        </li>
                        <li><a href="#">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /.container -->
        <div class="main-box-footer">
            <div class="content">
                <p class="main-title blue-title">Eventos por categoria.</p>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Concerto <span class="badge">8</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Gastronomia <span class="badge">12</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Aulas e Workshops <span class="badge">7</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Desporto <span class="badge">15</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Conferências <span class="badge">3</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Cinema <span class="badge">10</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Festival <span class="badge">2</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Negócios <span class="badge">5</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Festas <span class="badge">1</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Artes Performativas <span class="badge">9</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Ciência <span class="badge">6</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Saúde <span class="badge">4</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Latest compiled and minified JavaScript -->
        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

My css:

@charset "UTF-8";

/* CSS Document */
 body {
    background-color:#f6f6f6;
    font-family: Arial, Helvetica, sans-serif;
}

/* TEXTOS*/
 h1 {
    font-size:40px;
    color:#FFF;
    background-color: #52b266;
}

.blue-title {
    font-size:35px;
    color:#333c4e;
}

.blue-sub-title, .white-sub-title {
    font-size:22px;
    font-weight:bold;
}

.blue-sub-title {
    color:#333c4e;
}

.white-sub-title {
    color:#fff;
}

/* TEXTOS*/
 .main-title {
    max-width:1130px;
    margin: 0 auto;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
}

.main-box-header {
    background:#e6f0f3;
    width:100%;
    height:auto;
    left:0;
    margin:0px;
    padding:10px;
    text-align:center;
}

.main-box-footer {
    background:#e6f0f3;
    height:auto;
    left:0;
    margin:0px;
    padding:10px;
    text-align:left;
}

.content {
    max-width:1130px;
    margin:0 auto;
}

.events-box {
    background:#fff;
    border: 1px solid #CCC;
    max-width:300px;
    height:100%;
    margin:0 auto;
    margin-bottom:20px;
    box-shadow: 0px 0px 8px #888888;
    padding:20px;
}

a:hover {
    text-decoration:none;
}

.events-box img {
    max-width:100%;
    height:auto;
}

.events-cost {
    color:#00a651;
    background:white;
    opacity: 0.9;
    filter: alpha(opacity=90);
    /* For IE8 and earlier */
    font-size:15px;
    text-transform:uppercase;
    margin-top:-20px;
    text-align:center;
    max-width:100%;
}

.events-name {
    font-size:20px;
    font-weight:bold;
    text-align:left;
    margin-top:10px;
}

.events-place {
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
}

.events-date {
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
}

.events-cat {
    font-size:18px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#666;
}

.events-action {
    max-width:100%;
    text-align:right;
    margin: 0 auto;
    margin-top:5px;
}

.list-categorias {
    width:100%;
    height:auto;
    padding:30px;
    background:#e6f0f3;
}

.badge {
    background-color:#0d1014;
}

.footer {
    background:#333c4e;
    height:200px;
    padding-top:20px;
}

@media screen and (max-width: 400px) {

    .blue-sub-title {
        font-size:14px;
    }

    h1 {
        font-size:20px;
        color:#FFF;
        background-color: #52b266;
    }

    .white-sub-title {
        display:none;
    }

    .events-box {
        width:100%;
        height:auto;
    }

    .events-box img {
        max-width:100%;
    }

    .events-cost {
        max-width:100%;
    }
}
twitter-bootstrap css3 height

2 answers

2

To make this possible you can use:

Min-height: assigns the div’s to the min-height attribute with the highest div value. However, I do not advise using this if the content is manageable.

Ex.:

div {
    border: 1px solid rgb(0, 100, 125);
    display: inline-block;
    min-height: 250px;
    vertical-align: top;
    width: 100px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nun</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nunc nulla, ullamcorper id egestas ut, laoreet nec mauris</div>

Assign height to "container": if you assign a fixed value to the Node "father" or "container" you can say that the daughters will have 100% of the Node "father" height".

Ex.:

#box {
  height: 250px;
}
.box-item {
  border: 1px solid black;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 200px;
}
<div id="box">
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nun</div>
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nunc nulla, ullamcorper id egestas ut, laoreet nec mauris</div>
</div>

Flex-box: Using the Flexible Box Model you can assign 100% height to children using stretch value for the property Justify-content.

Ex.:

#box {
  border: 1px solid red;
  display: flex;
  justify-content: stretch;
  align-items: space-around;
}
.box-item {
  border: 1px solid blue;
  width: 50%;
}
<div id="box">
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nun</div>
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nunc nulla, ullamcorper id egestas ut, laoreet nec mauris</div>
</div>

NOTE: This is just a basic example of flex-box, if you intend to use it state that read that post and that CSS Tricks and Tableless respectively and use the appropriate vendor-prefixes (-Webkit, -Moz, -ms...). You can see here current support of this property by browsers.

There are also other solutions, but I recommend you use some of these.

0

Friend, could you set a Max-height and a Max-width in the image dimension, with this would not give problem, or limit the user and always input the image in a specific size.

Below are the CSS properties Max http://www.w3schools.com/css/css_dimension.asp

  • there is no way, regardless of the [height] of the image, the div immediately below does not descend, always maintaining the same spacing between the Divs?

Browser other questions tagged twitter-bootstrap css3 height

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