Question

我有三个要素：

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >
<div class="col-md-6">
    <div align="right" class="box">
        <i class="las la-phone-volume" style="font-size: 48px; color: #337ab7; align-content: right;"></i>
        <a style=" font-size: 20px; ">111111111111</a>
        <a style=" font-size: 20px; ">33333333333333</a>
    </div>
</div>

我如何让它们变成这样？ image

Answer 1

您可以使用 css grid

.grid {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 24px 24px;
  place-items: flex-start;
}

.grid i {
  grid-column: 1;
  grid-row: span 2;
}

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<div class="col-md-6">
  <div align="right" class="grid">
    <i class="las la-phone-volume" style="font-size: 48px; color: #337ab7; align-content: right;"></i>
    <a style=" font-size: 20px; ">33333333333333</a>
    <a style=" font-size: 20px; ">111111111111</a>
  </div>
</div>

如何排列元素

1 个答案: