All geek questions in one place

Why do my columns wrap with window resizing?

I am trying to add four columns evenly spaced on a web page that retain their structure when the browser window is resized. I built it this way on the basis of a textbook that I cannot find now. They look great until you resize the browser window. Can someone tell me why my 3rd and 4th columns keep the wrapper in the first two when the browser window changes?

#ColumnMain {
  width: 100%;
  height: auto;
  float: left;
  margin-left: auto;
  margin-right: auto;
  min-width: 44%
}

.col1 {
  float: left;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 350px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col2 {
  float: left;
  padding: 10px 20px 15px 20px;
  margin-left: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col3 {
  float: right;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
  overflow: hidden;
}

.col4 {
  float: right;
  padding: 10px 20px 15px 20px;
  margin-right: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
  Overflow: hidden;
}
<div class="columns" id="ColumnMain">
  <div class="col1">content</div>
  <div class="col2">content</div>
  <div class="col3">content</div>
  <div class="col4">content</div>
</div>
Run codeHide result
+4
source share
7 answers

, , bootstrap CSS.

. margin/padding /, . .

:

box-sizing:border-box;

200 , 25% .

#ColumnMain {
      width: 100%;
      height: auto;
      float: left;
      margin-left: auto;
      margin-right: auto;
      min-width: 44%
    }

    .col1 {
      float: left;
      padding: 10px 20px 15px 20px;      
      width: 200px;
      height: 100px;
      border-left: solid 1px #35488C;
      box-sizing:border-box;
    }

    .col2 {
      float: left;
      padding: 10px 20px 15px 20px;      
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      box-sizing:border-box;
    }

    .col3 {
      float: left;
      padding: 10px 20px 15px 20px;     
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      overflow: hidden;
      box-sizing:border-box;
    }

    .col4 {
      float: left;
      padding: 10px 20px 15px 20px;     
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      Overflow: hidden;
      box-sizing:border-box;
    }
<div class="columns" id="ColumnMain">
  <div class="col1">content</div>
  <div class="col2">content</div>
  <div class="col3">content</div>
  <div class="col4">content</div>
</div>
Hide result
+2

, div. , div, display: table;. , div , .

#ColumnMain {
display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  min-width: 44%
}

.col {
  display: table-cell;
  padding: 10px 20px 15px 20px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col1 {
  margin: 0;
  width: 350px;
}

.col2 {
  margin-left: 10px;
  width: 22%;
}

.col3 {
  margin: 0;
  width: 22%;
  overflow: hidden;
}

.col4 {
  margin-right: 10px;
  width: 22%;
  overflow: hidden;
}
<div class="columns" id="ColumnMain">
  <div class="col col1">content</div>
  <div class="col col2">content</div>
  <div class="col col3">content</div>
  <div class="col col4">content</div>
</div>
Hide result
+1

col1 - 350px. , 22% + 22% + 22% + 350 , . , , .

0

, div , , , , , .col, , div .

0

CSS , . . , , , . , :

.col {
  float: left;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 25%;
  height: 100px;
  border-left: solid 1px #35488C;
  box-sizing: border-box;
}
<div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
</div>
Hide result

gifv: http://i.imgur.com/VgBByqf.gifv

, ( ), CSS .color:

.col:first-child {
  border-left: none;
}
0

<html>
        <head>    
        <style> 
        .cols_ex {     
         -webkit-columns: 4 10px;     
         -moz-columns: 4 10px;    
          columns: 4 10px;     
         -webkit-column-gap: 2em;     
         -moz-column-gap: 2em;     
          column-gap: 2em;     
         -webkit-column-rule: 2px dashed gray;    
         -moz-column-rule: 2px dashed gray;    
          column-rule: 2px dashed gray; 
       }  
       </style> 
       </head> 
       <body>    
       <div class="cols_ex">         
        <p>Just at this moment her head struck against the roof of the hall: in fact she was now rather more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.</p>        
        <p>Poor Alice! It was as much as she could do, lying down on one side, to look through into the garden with one eye; but to get through was more hopeless than ever: she sat down and began to cry again.</p>        
        <p>"You ought to be ashamed of yourself," said Alice,"a great girl like you" (she might well say this), "to go on crying in this way! Stop this moment, I tell          you!"</p>         
        <p>But she went on all the same, shedding gallons of tears,until there was a large pool all round her, about four inches deep, and reaching half down the hall.</p>     
       </div>
       </body> 


</html>
Hide result
0

, .col1 , - 100% , .

- display: flex, , ( , , flex-wrap).

@media, / - .

.columns {
  min-width: 44%;
  margin: auto;
  display: flex;
}

.col {
  padding: 10px 20px 15px 20px;
}

.col1 {
  width: 350px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col2 {
  margin-left: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col3 {
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col4 {
  margin-right: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

@media (max-width: 420px) {
  .columns {
    flex-direction: column;
  }
  .col {
    margin: 0;
    width: auto;
  }
}
<div class="columns" id="ColumnMain">
  <div class="col1 col">content</div>
  <div class="col2 col">content</div>
  <div class="col3 col">content</div>
  <div class="col4 col">content</div>
</div>
Hide result
0

Source: https://habr.com/ru/post/1678196/

More articles:


All Articles