Question

我正在构建一个功能，在容器内部有三个圆圈，它们是彼此相邻的。最初，当我开始构建此功能时，我认为我可以将我的圈子放到flex container中，当我添加媒体查询并调整页面大小时，它们都会很好。

我的鄙视并非如此。圈子完全进入容器内部，但当我开始调整页面大小时，我注意到它们正在压扁！我知道这一点，因为border-radius:50%作为圆圈需要是一个百分比，当它们被按下时，它们会改变大小bc它们是流动的。

这个问题促使我想到解决方案，以防止圈子被压扁。我有一个想法，围绕圈子围绕div，这可能会阻止他们压扁，所以环顾四周，看看是否有人曾经这样做过。

根据我的喜好，我找到了有人在STO上发布的解决方案。我稍微修改了解决方案以满足我自己的需求，但工作正常，但这里有一个小问题，我不确定我喜欢它的标记外观。凌乱杂乱凌乱！

解决方案

 <!-- 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>

我想找个方法来清理解决方案标记多一点，但我不确定是否有办法做到这一点..我不想用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;

具有凌乱标记的响应圈子

1 个答案: