3個圓圈和響應

-1

我很好奇，如果有任何教程或示例代碼的佈局，有3個並排的文件，每個下面的文字。另外，它也是響應式的，所以它只有1個圓圈，下面有文字，依此類推。謝謝3個圓圈和響應

2017-01-17 b_dejonge

如果您熟悉Bootstrap，您可以嘗試這樣的事情。

<div class="row"> 
     <div class="col-sm-4"> 
     <div class="circle"></div> 
     <span>This is a text</span> 
     </div> 
     <div class="col-sm-4"> 
     <div class="circle"></div> 
     <span>This is a text</span> 
     </div> 
     <div class="col-sm-4"> 
     <div class="circle"></div> 
     <span>This is a text</span> 
     </div> 
    </div> 
    <style type="text/css"> 
     .circle{ 
     position: relative; 
     border-radius: 50%; 
     width: 100%; 
     height: auto; 
     padding-top: 100%; 
     background: black; 
     } 
    </style>

來源

2017-01-17 07:40:38

也許你應該看看bootstrap庫。

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
     <body> 
     <div class="row"> 
      <div class="col-md-4"> 
      <img src="yourcirclepicture.png" alt="circle"> 
      </div> 
      <div class="text"> 
      your text 
      </div> 
      <div class="col-md-4"> 
      <img src="yourcirclepicture.png" alt="circle"> 
      </div> 
      <div class="text"> 
      your text 
      </div> 
      <div class="col-md-4"> 
      <img src="yourcirclepicture.png" alt="circle"> 
      </div> 
      <div class="text"> 
      your text 
      </div> 
     </div> 
    </body> 
</html>

如果存在enogh空間，類行標識哪個內容應該在一行中。如果窗口較小，則內容（每個col-md-4）將被放置在彼此之下。

不要忘記包含bootstrap庫。

應該是所有。

來源

2017-01-17 07:43:26 Gabbax0r

3個圓圈和響應

回答

相關問題