Сделать содержание справа больше всего в теге div

Question

У меня есть фрагмент HTML

<div id="title">This is title<span id="close">X<span><div> 

Ширина этого элемента является динамической, может быть, 300, 600 или 800 пикселей. Я хочу, чтобы "X" справа от div в той же строке. Так что напишите css как ниже:

#close
{
   margin-right:10px;
}

Но это не работает. Если я хочу реализовать это, что я должен настроить?

С наилучшими пожеланиями,

Answer 1

<div id="title"><div class="float-right"><span id="close">X</span></div>This is title</div> 

и класс

.float-right{
float:right;
}

Answer 2

Использовать абсолютное позиционирование.

#title {position: relative; width: 300px}
#close {position: absolute; top: 5px; right: 5px} /* adjust based on required margin */

Но имейте в виду, что абсолютно позиционированный контент находится за пределами блочной модели и может перекрывать контент внутри title div. Вам нужно установить соответствующие отступы / поля, чтобы избежать этого.

Answer 3

В вашем вопросе есть несколько проблем с HTML:

• Свойство CSS «margin-right» дает вам 10 пикселей пространства справа от вашего элемента, за пределами границы. Вместо этого вы хотите использовать float: right (и div вместо span, так как float работает только с блочными элементами)

• Ваши теги не закрыты (используйте <div></div> вместо <div><div>)

Чтобы добиться того, чего вы хотите, попробуйте следующее:

<div id="title">
    This is title <div id="close">X</div>    
</div>  

со следующим CSS

#close 
{ 
 float:right;
}

Answer 4

Попробуйте это:

<div id="title">This is title<div><span id="close">X<span></div><div> 

и стиль:

#title div {
  text-align: right;
  float: right;
  clear: none;
}

Или вы можете полностью избавиться от диапазона и просто использовать div, сделать его шириной 20 пикселей и придать ему другой цвет, чтобы он выглядел больше как кнопка.

Я бы использовал графическое изображение в img для кнопки закрытия, но каждому свое.

Альтернативное расположение:

<div id="title"><div style="width:20px"><span id="close">X<span></div>This is title<div>