Float:right ограничен своим родительским div, заставляя его выравниваться вправо/идти вниз по строке
Я пытаюсь получить div панели инструментов, при этом левый div выровнен по левому краю, а правый div выровнен по самому правому краю экрана.
Я попытался установить фиксированный разделитель для родительского разделителя, но ни один из методов не кажется интуитивно понятным. Я не могу использовать 100vw для родительского div, так как слева есть панель инструментов.
.dashboard_secondary_toolbar{
/* display:inline-block; */
flex: 1;
}
.dashboard_secondary_toolbar_left{
float: left;
}
.dashboard_secondary_toolbar_right{
float: right;
}<div class = "dashboard_secondary_toolbar">
<div class = "dashboard_secondary_toolbar_left">
<p> align me left </p>
</div>
<div class = "dashboard_secondary_toolbar_right">
<p> align me right </p>
</div>
</div>@ j08691 j08691 Спасибо, мне пришлось переписать его вместо копирования и вставки, так как между кодом было много вещей. Это отредактировано сейчас, должно работать, чтобы не работать.
Подумайте о переходе на flex, это намного проще и мощнее: css-tricks.com/snippets/css/a-guide-to-flexbox
Ответы 3
Вам не нужен float, просто используйте display: flex; вместо отображения: встроенный блок;
Это ничего не меняет. Но удалил, спасибо.
вот рабочий пример jsfiddle.net/chille1987/s57yrtnf/1
просто используйте flex вместо float для каждого div
.dashboard_secondary_toolbar {
display: flex;
flex: 1;
justify-content: space-between;
}<div class = "dashboard_secondary_toolbar">
<div class = "dashboard_secondary_toolbar_left">
<p> align me left </p>
</div>
<div class = "dashboard_secondary_toolbar_right">
<p> align me right </p>
</div>
</div>Вы можете добиться этого, используя Флексбокс.
<div class = "dashboard_secondary_toolbar">
<p> align me left </p>
<p> align me right </p>
</div>
стили:
.dashboard_secondary_toolbar {
display: flex;
justify-content: space-between;
}
В настоящее время вы больше не используете «плавать».
Обратите внимание, что в вашем примере отсутствует
"вclass = "dashboard_secondary_toolbar, и добавление его обратно меняет результат вашего примера.