Блог

Я пытаюсь создать DIV, который содержит два элемента, <h2> и a <button> . Они должны находиться на противоположных сторонах (слева-справа) контейнера. Мне удалось сделать это, используя абсолютные позиции для дочерних элементов:

 #header2{
    position: relative;
    padding: 0.4em;
    color: white;
    background-color: #CC3333;
    min-height: 100px;
}

h2{
    position: absolute;
    display:inline;
}


#button{
    position: absolute;
    text-decoration: none;
    vertical-align: middle;
    padding: .1em;
    width:100px;
    height: 80%;
    margin-right: 5px;
    right: 0;
}
  

Теперь я обнаружил, что эти элементы перекрываются, когда они не помещаются на меньшем экране. Я понимаю, что это вызвано абсолютным положением, из-за которого эти элементы игнорируют поток компоновки. Итак, то, что я пытаюсь найти, — это способ выровнять элементы по противоположным сторонам и сохранить поток компоновки div, чтобы сделать его более гибким.

Один из способов — переместить их. Но не забудьте очистить значения с плавающей точкой.