Geek Answers Handbook

Div resize to divs%

My problem is that I am trying to create a responsive template. Now I'm just making a headline.

First I will post the code here for you to understand.

<div id="header_box">
  <div class="box">
  Content of box / Img
  </div>
  <div class="box">
  Content of box / Img
  </div>
  <div class="box">
  Content of box / Img
  </div>
</div>

The header_box has a width of 100%, and the thinking field is 40%.

This means that since there are 3 “boxes”, it will be 120%, is there any way for the width of the “window” to automatically change by about 30%, and if I add another “box”, it is 20%, or something like that?

Thank.

+4
source share
2 answers

Your identifiers must be unique first, so in the example you specified, it is better to use classes (i.e. class="box")

flex inline-flex CSS DIV . : http://jsfiddle.net/18e3cxd1/

.box {
    display:inline-flex;
    width:30%;
    border:solid 1px red;
}

flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

+3

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_box{
    display: table;
    width: 100%;
    border-spacing: 5px;
}
.box{
    display: table-cell;
    vertical-align: top;
    padding: 15px;
    border: 1px solid #f00;
}

@media screen and (max-width: 400px) {
    
    .box{
        display: table-caption;
    }    
    
}
<div class="header_box">
    <div class="box">
        <p>Content of box / Img</p>
    </div>
    <div class="box">
        <p>Content of box / Img</p>
    </div>
     <div class="box">
        <p>Content of box / Img</p>
    </div>
</div>
Hide result
0

More articles:


All Articles