Как отобразить Flex столбец с CSS при вызове каждого метода на объекте - PullRequest
Новая
       21

Как отобразить Flex столбец с CSS при вызове каждого метода на объекте

0 голосов
/ 23 мая 2019

Я пытаюсь отобразить: гибкие столбцы на каждом элементе (продукте), но в результате я продемонстрировал их в вертикальной компоновке (коды приведены ниже), мне было интересно, как мне продемонстрировать это при отображении как flex, а также когда вАсимметричный макет столбца (при циклическом прохождении каждого объекта).благодарю вас!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  display: flex;
  margin:20px;
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

</head>
<body>

<h2>All Products</h2>
<% @products.each do |product| %>



<div class="row">
  <div class="column" style="background-color:#aaa;">
    <%= product.product_name %>
    <%= product.description %>
  </div>


</div>
<% end %>
</body>
</html>

1 Ответ

0 голосов
/ 23 мая 2019

Я не понимаю .. но, возможно, вы могли бы попробовать сделать это 

<div class="row">
    <div class="column">
        <%= product.product_name %>
        <%= product.description %>
    </div>
    <div class="column">
        <%= product.product_name %>
        <%= product.description %>
    </div>
    <div class="column">
        <%= product.product_name %>
        <%= product.description %>
    </div>
</div>

с файлом CSS: 

.row{
     display: flex;
}

.column{
     width:33%;
}

Я бы порекомендовал вам использовать бутстрап https://getbootstrap.com/

P.S. Если вы установите ширину 33%, горизонтальные отступы или поля будут испорчены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...