Ответственные круги с грязной разметкой

Question

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

Много для моего презрения, которого не было в этом случае. Кружки полностью вошли в контейнер, но когда я начал изменять размер страницы, я заметил, что они хлюпают! Я знаю это потому, что border-radius:50%, поскольку круги должны быть процентами, и когда они нажимаются, они меняют размер bc, они являются текучими.

Этот вопрос побудил меня подумать о решении, чтобы избежать крушения кругов. У меня была идея об окружающих кругах вокруг, которые могли бы остановить их хлюпание, поэтому осмотрелись, чтобы увидеть, не сделал ли кто-нибудь это раньше.

Мне очень понравилось, что я нашел решение, которое кто-то разместил на СТО. Я немного изменил решение, чтобы удовлетворить свои собственные потребности, который отлично работает, но здесь есть небольшая проблема, я не уверен, что мне нравится, как выглядит моя разметка. Беспорядочный грязный беспорядок!

Решение

<!-- Projects --> 
<div class="circles"> 
    <div> 
     <div> 
      <div> 
       <div class="projects"> 
        <a href="#">Projects</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- About --> 
    <div> 
     <div> 
      <div> 
       <div class="about"> 
        <a href="#">About</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Contact --> 
    <div> 
     <div> 
      <div> 
       <div class="contact"> 
        <a href="#">Contact</a> 
       </div> 
      </div> 
     </div> 
    </div> 

По сравнению с моей первоначальной разметкой существует четкое различие в меньшем количестве div s

Оригинального

<div class="gridRow"> 
    <div class="gridItem1"> 
     <a href="#" id="projects">Projects</a> 
     </div> 

    <div class="gridItem2"> 
     <a href="#" id="about">About</a> 
    </div> 

    <div class="gridItem3"> 
     <a href="#" id="contact">Contact</a> 
    </div>  
</div> 

Я ищу хочет укажите способ очистки s olution разметка немного больше, но я не совсем уверен, есть ли способ сделать это. Я не хочу использовать svg, поскольку я просто хочу css-решение. Есть идеи?

скрипок здесь

хлюпающих кругов https://jsfiddle.net/kapena/vmt54cd0/

Отзывчивых Круги https://jsfiddle.net/kapena/vmt54cd0/

Answer 1

Попробуйте добавить их к gridItem стилям:

min-width:200px; 
width:200px; 
max-width:200px; 
min-height:200px; 
height:200px; 
max-height:200px;