有人可以帮我在这个 div 上对齐 X 吗？我一直在玩它，无法弄清楚:(

Question

这是笔

https://codepen.io/brxtn/pen/rNOJKBq

<div class="annotation">
<div class="annotext">
<div class=annobar></div>
<div class="x">✕</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

我一直在努力将所有内容都保留在“注释”div 中，并让“annobar”与文本对齐：

Answer 1

您可以使用 annobar 的一半边距作为顶部位置（在这种情况下为 -0.5rem）绝对定位 x 并制作注释文本 position: relative（所以右上角是您想要 x 的位置):

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
  width:250px;  
  padding:0px;
  position: relative;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  position: absolute;
  right: 0;
  top: -0.5rem;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    width: 90%;
}

<div class="annotation"><div class="annotext"><div class=annobar><div class="x">✕</div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div>

Answer 2

我添加了一个标题 div，然后将 X 和红线都放入其中。然后我在这两个上都使用了左浮动。然后我设置主父级的宽度来限制文本的宽度。由于浮动，您必须清除：都在文本 div 上。

编辑 更正了 Codepen 链接 Here 是密码笔。

将其用于 HTML

<div class="annotation">
  <div class="annotext">
    <div class="header-div">
      <div class=annobar></div>
      <div class="x">✕</div>
    <div/>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
  </div>
</div>

将此用于 CSS

.annotation{
  height:auto;
  font-family:cardo;
  width:265px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:left;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    float: left;
    width:250px;
}
.text{
  clear:both;
}

Answer 3

尝试添加：

float: right

到 x 的 css。这将使 X 出现在右侧。

此外，如果您将 X 移动到注释文本内部，并使注释文本“浮动：左”，则 X 将出现在行的顶部。

要完成它，你可以让 X 有一个白色背景来遮盖线条。

这是最终结果：

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
  float:left;
}

.x{
   padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:right;
  background-color:white;
}


.annobar{
    display:block;
    height:1px;
    border:0;   	
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

<div class="annotation">
  
  <div class="annotext">
    <div class="x">✕</div>
    <div class=annobar></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  
</div>