Макет из 4 блоков (фиксированный-плавный-фиксированный-фиксированный), блоки не располагаются рядом

Question

мне нужно

1. 4 блока бок о бок (fixed-fluid-fixed-fixed)

я мог бы прийти сюда: https://jsfiddle.net/mbhndrzu/1/

кажется, что width в порядке, но они не сидят бок о бок.

Не могли бы вы объяснить причину, в чем неисправность и как исправлять? спасибо, привет

Answer 1

Используйте flex в классе clearfix для отображения в одной строке с flex: 1 внутренних div, чтобы иметь одинаковую ширину

  <style>
  .clearfix
   {display:flex;
   justify-content:space-around;
   align-items: center;
  margin:auto;
    }

   .clearfix div
   { flex:1;
     justify-content:center;

    } 

</style>   



    <nav class="clearfix">
        <div id="d1">
            <p>d1</p>
            <p>hjsdakh jhsdjka hsdja sdh hjjdhsj</p>
        </div>
        <div id="d2">
            <p>d2</p>
        </div>
        <div id="d3">
            <p>d3</p>
            <p>hjsdakh</p>
            <p><img width="30" height="30" src="https://fallbacks.carbonads.com/nosvn/fallbacks/731050e6bd3fc6979e1cb1a972294dae.png" /></p>
        </div>
        <div id="d4">
            <p>
                d4
            </p>
            <p>
                d4
            </p>
        </div>
    </nav>