如何定位卡片

Question

我的问题是如何在我的网站上定位这些卡？

https://imgur.com/a/Ompfh

如果它们上方没有这半圈，那将很容易。我试图为3张卡中的每张卡创建父类=“卡”和类=“卡”。在css中：

.cards { display: flex } 
.card { width: 33.33% }

并将相对位置设置为我的背景和绝对位置到我的半圈，但我想在没有绝对和相对位置的情况下这样做，如果可能的话。

.cards {
  display: flex;
}

.card {
  width: 33.33%;
  color: #fff;
  text-align: center;
}

.card p {
  min-height: 80px;
  padding: 0 39px 0 39px;
}

.strategy--logo {
  position: absolute;
  top: 383px;
  left: 607px;
  width: 96px;
  height: 48px;
  background-color: #5a471b;
  border-top-right-radius: 48px;
  border-top-left-radius: 48px;
}

.strategy {
  margin-top: 135px;
  background-color: #5a471b;
}

.crop--marketing {
  margin-top: 135px;
  background-color: #9fa374;
}

.risk--mgmt {
  margin-top: 135px;
  background-color: #666;
}

<div class="cards">
  <div class="card">
    <div class="strategy">
      <div class="strategy--logo">
        <img src="css/images/strategy-logo.png" alt="" />
      </div>
      <!-- /.strategy-/-logo -->

      <h2>

      </h2>

      <p>

      </p>
    </div>
    <!-- /.crop-/-marketing -->
  </div>
  <!-- /.card -->

  <div class="card">
    <div class="crop--marketing">
      <img src="css/images/crop-logo.png" alt="" />

      <h2>

      </h2>

      <p>

      </p>
    </div>
    <!-- /.crop-/-marketing -->
  </div>
  <!-- /.card -->

  <div class="card">
    <div class="risk--mgmt">
      <img src="css/images/arrow-logo.png" alt="" />

      <h2>

      </h2>

      <p>

      </p>
    </div>
    <!-- /.risk-/-mgmt -->
  </div>
  <!-- /.card -->
</div>
<!-- /.cards -->

现在我正在使用绝对和亲戚，但还有另一种方式吗？因为当我调整我的网络浏览器大小时，圈子会随机消失......

Answer 1

你想要实现这个目标吗？

.card {
  displaY: block;
  float: left;
  width: 33.33%;
  text-align: center;
  color: white;
  font-family: 'Calibri';
}

.icon {
  width: 50px;
  height: 25px;
  /*half of width*/
  margin: auto;
  display: block;
  border-radius: 50px 50px 0 0;
}

.fa {
  margin-top: 10px;
}

.text {
  padding: 25px;
}

.strategy .text,
.strategy .icon {
  background-color: #5c471c;
}

.crop .text,
.crop .icon {
  background-color: #a0a175;
}

.risk .text,
.risk .icon {
  background-color: #666666;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="card strategy">
  <div class="icon">
    <i class="fa fa-area-chart" aria-hidden="true"></i>
  </div>
  <div class="text">
    Our Strategy
  </div>
</div>
<div class="card crop">
  <div class="icon">
    <i class="fa fa-pagelines" aria-hidden="true"></i>
  </div>
  <div class="text">
    Crop Marketing
  </div>
</div>
<div class="card risk">
  <div class="icon">
    <i class="fa fa-arrow-down" aria-hidden="true"></i>
    <i class="fa fa-arrow-up" aria-hidden="true"></i>
  </div>
  <div class="text">
    Commodity Risk Management
  </div>
</div>

Answer 2

问题是，当你使用position时，你的布局会改变其在别处的位置吗？

如果是这样，如果你做了一些改变，使用position属性是可以的：

CSS

.strategy--logo { 
    position: absolute; 

    /* Remove this top parameter, use transform instead */

    /* top:383px;  */

    /* Instead your value of a left use value of 50% and transform left 
    and right properties like it is changed below */

    /* left: 607px;  */
    left: 50%;
    transform: translate(-50%, -100%);        

    width: 96px; height: 48px; 
    background-color: #5a471b; 
    border-top-right-radius: 48px; 
    border-top-left-radius: 48px; 
}

.strategy { 

    /* add position relative to a parent of strategy-logo */

    position: relative; 

    margin-top: 135px; 
    background-color: #5a471b; 
}  

然后，即使您调整屏幕大小，您的代码也将保持相同的位置。