Question

我在显示this(check this picture)时遇到问题我左边有一个链接，右边有文字。显示它的正确方法是什么？以及如何在图标下显示单词？我需要帮助。请查看附图，了解我需要查看的内容。

<div class="back-to-listing-clinic">  
  <div> 
    <a> < back </a>
  </div>
  <div class="right-icons-part">
    <img class="clinic-top-icons"src="./assets/images/icons/forum.png"> 
    <img class="clinic-top-icons" src="./assets/images/icons/forum.png"> 
    <img class="clinic-top-icons" src="./assets/images/icons/forum.png"> 
  </div>
  <div> 
    <p> Icon1 </p>
    <p> Icon2 </p>
    <p> Icon3 </p>
  </div>
</div>

Answer 1

有十几种方法可以做到这一点。为了演示目的，我用图标替换了你的图像。

此方法只是将“左右”部分设置为display: inline-block以将它们放在一起，然后在右侧设置float: right以将它们分开。

我会考虑使用某种类型的CSS框架 - 但这可能是一种简单的方法来实现它。

无框架：

* {
  box-sizing: border-box;
}

.back-to-listing-clinic > div {
  display: inline-block;
}

.right-icons-part {
  float: right;
}

.right-icons-part:after {
  content: " ";
  display: block;
  clear: both;
  height: 0px;
}

.right-icons-part a {
  text-align: center;
  display: inline-block;
}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="back-to-listing-clinic">  
  <div class="left"> 
    <a> &lt; back </a>
  </div>
  <div class="right-icons-part">
    <a href="#"><i class="fas fa-comment-alt"></i><br />Icon 1</a>
    <a href="#"><i class="fas fa-comment"></i><br />Icon 2</a>
    <a href="#"><i class="fas fa-comments"></i><br />Icon 3</a>
  </div>
</div>

超简单Ungrid框架

@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}

.right {
  text-align: right;
}

.right-icons-part a {
  display: inline-block;
  text-align: center;
}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="row back-to-listing-clinic">  
  <div class="col left"> 
    <a> &lt; back </a>
  </div>
  <div class="col right right-icons-part">
    <a href="#"><i class="fas fa-comment-alt"></i><br />Icon 1</a>
    <a href="#"><i class="fas fa-comment"></i><br />Icon 2</a>
    <a href="#"><i class="fas fa-comments"></i><br />Icon 3</a>
  </div>
</div>

css同时左右对齐

1 个答案: