Задать ширину блоку

@WasWas · Регистрация: 01.07.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Пытаюсь двумя способами (через float-left и box-sizing: border-box) сделать колонки из блоков, каждый из которых должен быть по размеру равным 1/3 от ширины родителя. Проблема в синем блоке, если устанавливаю ему ширину width: calc(100%/3), он исчезает, в противном случае (если не задавать ширину), он обтекает зеленый блок, но его ширина больше, чем 1/3 от родителя, что не верно. Подскажите, пожалуйста, в чем ошибка? Также визуально по этим двум способам блоки почему то получаются немного разными по высоте и ширине

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Стили текста и оформления</title>
</head>
<body>
    <div>
               <div class="ex1">
            <div class="cols variant1">
                <div class="red"></div>
                <div class="green"></div>
                <div class="blue"></div>
            </div>
            <div class="cols variant2">
                <div class="red"></div>
                <div class="green"></div>
                <div class="blue"></div>
            </div>
        </div>
</body>
</html>

CSS

 html {
            font-family: helvetica, sans-serif;
            font-size: 62.5%;
            font-weight: 400;
            font-style: normal;
        }
        .container {
            position: relative;
            padding: 30px 40px;
        }
        .red {
            background: red;
        }
        .green {
            background: green;
        }
        .blue {
            background: blue;
        }
 
        .ex1 {
            margin-bottom: 100px;
        }
        .ex1 .cols {
            margin-bottom: 50px;
        }
        .ex1 .cols > div {
            min-height: 100px;
        }
        .ex1 .variant1 .red {
            float: left;
            overflow: hidden;
            width: calc(100%/3);
            border: 5px solid;
 
        }
         .ex1 .variant1 .green {
            float: left;
            overflow: hidden;
            width: calc(100%/3);
            border: 5px solid;
 
        }
        .ex1 .variant1 .blue {
            border: 5px solid;
            /*width: calc(100%/3);*/
            width: calc(100%-200%/3);
 
 
        }
         .ex1 .variant2 .red {
            float: left;
            width: calc(100%/3);
            box-sizing: border-box;
            border: 5px solid;
        }
        .ex1 .variant2 .green {
            float: left;
            width: calc(100%/3);
            box-sizing: border-box;
            border: 5px solid;
        }
        .ex1 .variant2 .blue {
            border: 5px solid;
            /*width: calc(100%/3);*/
            width: calc(100%-200%/3);
            box-sizing: border-box;
        }

http://codepen.io/Slipa_AA/pen/QEgLWL

@ironid · 03.07.2016, 09:04

CSS

      .red {
          background: red;
      }
      .green {
          background: green;
      }
      .blue {
          background: blue;
      }
 
      .cols > div {
          min-height: 100px;
          float: left;
          overflow: hidden;
          width: calc(100%/3);
          border: 5px solid;
          box-sizing: border-box;
      }

@mrtoxas · 03.07.2016, 10:34

Вариант без флоатов:

CSS

.wrapper{
  font-size:0;
}
.wrapper > div{
  height:100px;  
  width:33.33%;  
  display:inline-block;
  font-size:16px;
  border:4px solid black;
  box-sizing: border-box;
}
 
.block1, .block4{background:red;}
.block2, .block5{background:green;}
.block3, .block6{background:blue;}

HTML5

<div class="wrapper">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  <div class="block5"></div>
  <div class="block6"></div>
</div>

Результат

Добавлено через 12 минут
На opera mini и ie8, сверстанное с calc, распадется. caniuse:calc

@WasWas · 03.07.2016, 14:04 **[ТС]**

Спасибо! Если все-таки пробовать верстать и при помощи float, получается, что блоки, сверстанные обеими способами (float и box-sizing) разные по ширине, хотя всем блокам задается ширина 33.33% и firebug показывает одинаковое число пикселей, но даже визуально видно, что они разные и во вкладке Макет другое число высоты и ширины (из-за этого и синий блок сваливается вниз, т.к. места ему не хватает). Для блока variant2 задаем высоту, но по firebug она меньше, это тоже визуально видно. Посмотрите, пожалуйста, в чем проблема с шириной и как по float сделать ее в 33.33%

CSS

.variant1 {
            overflow: hidden;
 
        }
        .variant1 .red {
            height:100px;  
            width:33.33%;  
            display:inline-block;
            font-size:16px;
            border:5px solid black;
            float: left;
            
        }
        .variant1 .green {
            height:100px;  
            width:33.33%;  
            display:inline-block;
            font-size:16px;
            border:5px solid black;
            float: left;
            
        }
        .variant1 .blue {
            height:100px;  
            width:33.33%;  
            display:inline-block;
            font-size:16px;
            border:5px solid black;
            
            
        }
        .ex1 .variant1 {
            margin-bottom: -100px;
        }
        .variant2 {
            font-size:0;
        }
        .variant2 > div {
            height:100px;  
            width:33.33%;  
            font-size:16px;
            border:5px solid black;
            box-sizing: border-box;
            display:inline-block;
        }

@mrtoxas · 03.07.2016, 14:31

Вот на флоатах, без calc

CSS

.wrapper{
  overflow: hidden;
}
.wrapper > div{
  box-sizing: border-box;
  border:1px solid black;
  width:33.33%;
  height:50px;
  float:left;
}
.block1, .block4{background:red;}
.block2, .block5{background:green;}
.block3, .block6{background:blue;}

HTML5

<div class="wrapper">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  <div class="block5"></div>
  <div class="block6"></div>
</div>

Результат

Добавлено через 8 минут
У вас много повторяющегося в коде. Это так надо, обучения ради? Большую часть можно сократить

Добавлено через 8 минут
По вашему примеру.
убираем:

CSS

1
2
3

 .ex1 .variant1 {
            margin-bottom: -100px;
        }

Добавляем:

CSS

*{
    box-sizing: border-box;
}
.variant2 {
    overflow: hidden;
}

Если не используете inline-block, тогда делать нулевой размер шрифта не нужно.
И почитайте про box-sizing. Мне кажется, вы не совсем правильно понимаете этот стиль.

@WasWas · 03.07.2016, 14:44 **[ТС]**

Спасибо! Казалось, что float:left должен был сразу определять ширину 33,33%, без box-sizing, сейчас понятно, что из-за border float правильно не сработает. Еще раз спасибо!

@WasWas 0 / 0 / 0 Регистрация: 01.07.2014 Сообщений: 7
	03.07.2016, 14:44 [ТС]	6
	Спасибо! Казалось, что float:left должен был сразу определять ширину 33,33%, без box-sizing, сейчас понятно, что из-за border float правильно не сработает. Еще раз спасибо! 0