Question

我已经弄乱了CSS / HTML代码，现在div中的所有元素都放在一行中，而不是像普通的<p>contents</p>标签一样显示，每行都有一个新行。这里是一个有效的示例https://abereznyak.ru/projects/bot/php/index.php

Css和html。

.card {
  /*    width: 320px;*/
  /*    height: 75px;*/
  position: relative;
  perspective: 1000px;
  margin-bottom: 15px;
  border: 3px solid white;
}

.front,
.back {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  /*    width: 100%;*/
  /*    height: 100%;*/
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
}

.front {
  background-color: #fff;
}

.back {
  background-color: #f1c40f;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}

.item {
  border: 1px solid red;
}

.container {
  margin-top: 30px;
}

.item {
  margin-bottom: 15px;
  margin-right: 50px;
}

.places {
  color: red;
}

.discount {
  color: green;
}

.timestamp {
  color: blue;
}

.card {
  height: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<!--main contents of the page in blocks form for each item-->
<div class="container">
  <div class="row">
    <?php $k=1 ?>
    <?php foreach($requests as $request) : ?>
    <div class="item col-md-3 col-sm-12" id="content<?php echo $k ?>">
      <div class="card">
        <div class="front">
          <p class="telegram_id">
            integer id
          </p>
          <p class="restaurant_name">

          </p>
          <p class="places">
            place count
          </p>
          <p class="discount">
            dicount
          </p>
          <p class="timestamp">
            time updated at
          </p>
          <button type="button">Wanna order</button>
        </div>
        <div class="back">
          random contents
        </div>
      </div>
    </div>
    <?php $k+=1 ?>
    <?php endforeach; ?>
  </div>
</div>
<!--main contents end is here-->
<!--jquery-->

https://jsfiddle.net/pr3w1k8x/

谢谢！

Answer 1

在类.back的CSS中，您正在使用display:flex 删除该行，然后您就可以用新行获得答案。

Answer 2

从您的display:flex班级中删除您的.front

如何正确分配元素

2 个答案: