Может ли кто-нибудь помочь мне выровнять X на этом div? Я играл с этим вечно и не могу понять :(

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 "аннотации" и получить это выравнивание "аннобара" с текстом:

Answer 1

Вы можете позиционировать x абсолютно, используя половину поля аннобара в качестве верхнего положения (в данном случае -0,5rem) и сделав аннотекст 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 из-за поплавков.

EDIT Исправленная ссылка на кодовое слово Здесь - это код.

Используйте это для 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

к css для x. При этом X появится справа.

Кроме того, если вы переместите X внутрь аннотации и сделаете аннотекст "float: left", X появится вверху строки.

Чтобы завершить sh его, вы должны сделать 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>