Сделать квадрат колокольчика

У меня есть индексный вид в приложении Rails. Я хочу отображать обложки альбомов в шаблоне заголовка в моем индексном представлении без пробелов. Я хочу, чтобы ботстрапы divs с классом «col-sm-4» были на той же высоте, что и их ширина, иначе я хочу, чтобы они были квадратами. Есть ли способ связать высоту div с шириной без использования javascript? Мне нужно, чтобы это было отзывчивым, очевидно, потому что ширина реагирует. Я искал вокруг и не мог найти ответа.Сделать квадрат колокольчика

Это мой код:

<%= @albums.each do |f| %> 
    <div class="col-sm-4"> 
     <p><%= f.title %></p> 
    </div> 
<% end %>

источник

2017-01-09 J Seabolt

Где находится ваш (не) Bootstrap CSS? – Roy

Я еще не начинал с CSS. Я хочу решить эту проблему перед дальнейшим стилем, потому что на нее все опирается. Прямо сейчас, класс, который вы видите, есть все, что есть. Я хочу, чтобы ширина была высотой divs. Я, очевидно, создаю класс для новых стилей. –

SO - это не место, где вы можете просто _ask_ для кода, вам нужно сначала попробовать его. Пожалуйста, добавьте отправную точку в коде, чтобы получить правильный и быстрый ответ на ваш вопрос. См. Также http://stackoverflow.com/help/mcve – Roy

Вы должны установить одинаковую ширину и высоту в parrent контейнере. Пример:

<div class="container"> 
    <div></div><div></div><div></div> 
    <div></div><div></div><div></div> 
    <div></div><div></div><div></div> 
</div> 


.container { 
    display: flex; 
    flex-wrap: wrap; 
    height: 600px; 
    width: 600px; 
} 

.container div { 
    background:#555; 
    border: solid 1px #000; 
    width: 100%; 
    max-width: 33%; 
}

источник

2017-01-09 19:35:34 grinmax

Сделать квадрат колокольчика

ответ

Смежные вопросы