Выравнивание плавающих divs

Question

У меня есть два divs внутри div главного контейнера. Первый div получил фиксированную ширину/160px/и плавает влево, второй div содержит только кнопку, которая должна быть выровнена вправо, поэтому я устанавливаю float вправо. Основной div имеет 25% ширины всей ширины страницы, и я использую bootstrap в своем приложении.

Все работает нормально до тех пор, пока ширина паре div не будет соответствовать обеим div, поэтому правый движется под левым - но есть ли способ выровнять/центр/второй div в этой ситуации? Поэтому, когда оба div являются одиночными в строке, они должны быть выровнены по центру родителя, но когда они находятся в одной строке, сначала нужно выровнять по левому и второму вправо или, возможно, в центр доступного пространства/родительского div widh минус 160px первого div /.

Большое спасибо за любые советы, Peter

EDIT: контейнер стиль: width:25%;

первый стиль/левый/дел: float:left; widht:160px;

второй/вправо/DIV стиль: margin-top:5px;

Answer 1

Вот пример, демонстрирующий, как это сделать.

#container 
 
{ 
 
    width: 25%; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
#left 
 
{ 
 
    width: 160px; 
 
    height: 5em; 
 
    background: green; 
 
    float: left; 
 
} 
 
#right 
 
{ 
 
    float: right; 
 
    height: 5em; 
 
    background: blue; 
 
} 
 
@media (max-width: 872px) 
 
{ 
 
    #right 
 
    { 
 
    float: none; 
 
    clear: both; 
 
    text-align: center; 
 
    } 
 
}

<div id='container'> 
 
    <div id='left'> 
 
    
 
    </div> 
 
    <div id='right'> 
 
    <button> 
 
     Button 
 
    </button> 
 
    </div> 
 
</div>

Вы должны использовать @media запрос, с точки останова, установленным в размере видового экрана, где две дивы не может поместиться на одной и той же линии.
Затем в этом медиа-запросе установить правильный DIV для

float: none; 
clear: both; 
text-align: center; 

HINT: Просмотр результатов кода фрагмент кода полный выгружаемого, а затем изменить размер окна, чтобы увидеть эффект.