Question

我正在使用的应用程序有一段使用flex设置样式的HTML代码，该代码存在于多个位置，以可视化多个弹出消息。邮件的右上角有一个关闭图标。

但是，根据<p>元素中消息的长度，文本和结束图标之间的距离会改变。例如，如果文本有多行或更长的单词，则<p>元素会占用更多空间，文本和结束图标之间的距离会增加，我不知道为什么。

如何确保它们之间的距离均匀？

<div style="display:flex; align-content:stretch;" id="aProductDraftUpdating>
   <p style="margin: 0px; flex:1 1 auto">
      "Editing the product draft continues from the last altered step. 
       Editing the product draft continues from the last altered step."
   </p>
   <i class="icons iconClose" role="link" style="flex:1 1 auto;" onClick="methodThatRemovesTheMessage(aProductDraftUpdating)">
      ::before
   </i>
</div>

Answer 1

您可以使用position：absolute放置关闭图标，并将paddind添加到警报框的右侧。这是一个示例：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.alert {
  position: relative;
  background: #ffffb7;
  padding: 5px 50px 5px 10px;
  z-index: 1;
  margin-bottom: -10px;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
}

.alert i {
  position: absolute;
  right: 20px;
}

.container {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="alert">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus dolor magna, a consequat enim fringilla vitae.</p>
  <i class="fas fa-times"></i>
</div>
<div class="container">
  
</div>

Flex段落有多行或更长的单词而不是一行时，其右侧边缘会占用更多空间

1 个答案: