html — Выравнивание div’ов в одной строке
Вопрос задан
Изменён 9 лет 6 месяцев назад
Просмотрен 20k раз
Приветствую всех вошедших
.one {width:800px; border:1px solid blue;}
.two {width:50px; border:1px solid red; height:50px;}
<div>
<div align="left"></div>
<div align="right"></div>
</div>
Пытаюсь внутри 1 дива (one) сделать 2 дива которые выровнены по левому и правому краю. Может кто подсказать где ошибка? link text
p.s. исправил 1, свою ошибку
- html
- css
У тега div нет аттрибута align. Для выравнивания дивов по левому и правому краю используются folat-ы: http://jsfiddle.
2
не очень ясна задача, но… если вам надо выровнять их справа и слева соответственно один под другим, то вот код:
<html>
<div>
<div>first</div>
<div>second</div>
</div>
<style>
.one{
width:800px;
border:1px solid blue;
overflow: hidden;
}
.one div{
width:50px;
border:1px solid red;
height:50px;
}
.one div:nth-child(1){
float: left;
}
.one div:nth-child(2){
clear: both;
float: right;
}
</style>
</html>
А если они должны быть в одной строке, то удалите строчку в стиле «clear: both;» и их выровняет в одной строке.
Примечание: делал через :nth-child, но не всеми версиями браузеров поддерживается. Это можно исправить добавив id или class для внутренних div’ов.
Второй вариант без float’ов:
<style>
.one{
width:800px;
height: 104px;
border:1px solid blue;
position: relative;
}
.one div{
width:50px;
border:1px solid red;
height:50px;
position: absolute;
}
.one div:nth-child(1){
top: 0px;
left: 0px;
}
.one div:nth-child(2){
bottom: 0px;
right: 0px;
}
</style>
Каким пользоваться зависит от задач.
Как вариант — http://jsfiddle.net/Alex83/khYJv/1/ без использования лишнего div’a.
Что касается атрибута align, то он устарел и использовать его не стоит.
align это выравнивание непосредственно внутри этого блока а не самого блока нужно через float, ниже пример http://jsfiddle.net/AJIEKCEU/7E9Yg/
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
css — Выравнивание по правому краю
Задать вопросВопрос задан
Изменён 3 года 7 месяцев назад
Просмотрен 74 раза
Не получается перенести последний пункт меню (Logout) вправо.
Классы float-right и text-right не помогают. Bootstrap4
<header>
<nav>
<div>
<ul>
<li>
<a href="/admin">Profile</a>
</li>
<li>
<a href="/admin/users">Users</a>
</li>
<li>
<a href="/admin/products">Products</a>
</li>
{% if (app.session.user_hash) %}
<li>
<a href="/logout">Logout</a>
</li>
{% endif %}
</ul>
</div>
</nav>
</header>
- css
- bootstrap4
1
Вся прелесть в том, что нужно вынести последнюю ссылку за список.
nav {
height: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<nav>
<div>
<div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
</ul>
<a href="#">Another Link</a>
</div>
</div>
</nav>
</header> Preview на всю страницу открывайте
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Как выровнять элемент по правой стороне блока div?
спросилИзменено 2 года, 10 месяцев назад
Просмотрено 23 тысячи раз
Мой div
Текст здесь
Мой CSS
#foo {
дисплей: блок;
ширина: 500 пикселей;
высота: 500 пикселей;
фон: #5e5e5e;
}
#дерево {
ширина: 100 пикселей;
высота: 30 пикселей;
фон: #000000;
}
Мне нужно дерево , расположенное в верхней правой части foo .
- HTML
- css
- css-позиция
2
Это можно сделать несколькими способами. Один из способов — добавить к дереву автоматическое левое поле:
поле слева: авто;
Другой вариант — применить float: right; к дереву, что может привести или не привести к нужному потоку контента.
И, наконец, я искренне рекомендую просто использовать flexbox.
Пример поля
#foo {
дисплей: блок;
ширина: 500 пикселей;
высота: 500 пикселей;
фон: #5e5e5e;
}
#дерево {
ширина: 100 пикселей;
высота: 30 пикселей;
фон: #000000;
поле слева: авто;
} <дел>
Текст здесь
Пример с плавающей запятой
#foo {
дисплей: блок;
ширина: 500 пикселей;
высота: 500 пикселей;
фон: #5e5e5e;
}
#дерево {
ширина: 100 пикселей;
высота: 30 пикселей;
фон: #000000;
поплавок: справа;
} <дел>
Текст здесь
#tree div всегда будет в верхнем правом углу #foo 
контейнер {
высота: 500 пикселей;
ширина: 500 пикселей;
цвет фона: красный;
}
.headerTitle {
дисплей: блок;
высота: 24 пикселя;
поля: 24px 24px 0;
заполнение: 0;
высота строки: 24px;
}
.sectionКласс {
ширина: 50%;
высота: 200 пикселей;
цвет фона: желтый;
плыть налево;
}
.rightSideDiv {
ширина: 50%;
высота: 200 пикселей;
цвет фона: розовый;
плыть налево;
} 
