0

Сверстать блок сочетая пиксели и проценты

Пытаюсь сделать так как показано на картинке. Число М одинаковое во всех случаях и задумано в процентах. Я новичок, поэтому полагаю что упускаю из вида всем известную формулу, которая в два счета подсчитает это число М. Если есть другие варианты решение данной задачи, буду рад ознакомится.

Примерный код получился ниже. Вот только вместо 4% в

 .box-M {
    width: 4%;
}

должно быть число М. Заранее спасибо!

.box {
    width: 100%;
    height: 44px;
}

.box div{
    float: left;
    height: 44px;
}

.box div:nth-child(even) {
    background-color: red;
    width: 44px;
}

.box div:nth-child(odd) {
    background-color: black;
}

.box div:first-child,
.box div:last-child {
    width: 7.5%;
}

.box-M {
    width: 4%;
}

</style>

<div class="box">
    <div></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div></div>
</div>

2 ответа 2

0

Понятно, что проще(и наверное правильнее) сделать flex-ом, но ТС просил расчёты - вот они:

*{
  box-sizing:border-box;
}
body{
  margin:0;
}
.block{
  overflow:hidden;
  padding:0 calc(7% + 22px);
  position:relative;
}
.m{
  float:left;
  height:50px;
  background-color:#acd;
  margin:0 22px;
  width:calc(25% - 44px);
}

/*для наглядности*/
.block:before,
.block:after{
  content:'7%';
  display:block;
  position:absolute;
  top:0;
  width:7%;
  height:50px;
  line-height:50px;
  text-align:center;
}
.block:before{
  left:0;
  border-right:1px dotted;
}
.block:after{
  right:0;
  border-left:1px dotted;
}
<div class="block">
  <div class="m"></div>
  <div class="m"></div>
  <div class="m"></div>
  <div class="m"></div>
</div>

2
  • А в процентах вычислить ширину блока M не получится т.к. отступы между ними заданы в абсолютных величинах.
    – zhurof
    11 июл 2018 в 10:44
  • Решение наиболее подходящее для кроссбраузерности, буду внедрять на сайт
    – Артём
    12 июл 2018 в 1:39
0
<div class="box">
  <div class="m"></div>
  <div class="m"></div>
  <div class="m"></div>
  <div class="m"></div>
</div>


.box {
  display: flex;
  justify-content: space-around;
  height: 25px;
  width: 960px;
  padding: 0 7%;
  border: 1px solid #000;
  box-sizing: border-box;
}

.m {
  display: flex;
  flex-basis: 20%;
  background: orange;
}
3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.