How to Align the <span> Element to the Right of the <div>
If you want to align a <span> element to the right of the <div>, you can use some CSS. Particularly, you need to use the float property with the “right” and “left” values.
Now, we’ll demonstrate an example and then explain it.
Example of aligning a <span> to the right of the <div> element:
Result
In our example, we have a <div> tag with two <span> elements. We applied the float property with the “right” value to the “date” class and the “left” value to the “name” class of the <span> elements. Also, we used the clear property with the “both” value on the «title» class to prevent floating elements on both sides.
So, in this way you can align the <span> within the <div> element to the right, but let’s see another example as well.
CSS. Выравнивание блочного элемента по правому краю.
Вчера, на работе, я пытался выровнять блочный элемент по правому краю. Такая задача встречается не часто, но даже когда она встречается, я использую inline-block или float , но можно обойтись без них.
Способ, о котором я расскажу, вам вероятно знаком. Одним из первых у верстальщиков встает вопрос о выравнивании элементов. Часто это центрирование блочных элементов через margin . Но я никогда не видел, чтобы кто-то использовал margin для выравнивания по правому краю. Думаю это из-за недопонимания механизма работы этого свойства со значением auto . Через него можно и по вертикали центрировать, но это тема отдельной статьи.
Демонстрация с тремя выравниваниями через margin .
Для выравнивания блочных элементов по центру, используется метод через margin auto .
Auto в данном случае говорит нам, что расстояние слева и справа блока, рассчитается браузером пропорционально,m основываясь на размере элемента и оставшимся местом. Так если элемент занимает 50% по ширине, боковые отступы станут одинаковыми, по 25%.
Для выравнивания по правому краю, используйте значение auto , но только для левого отступа.
Не забудьте, что элемент должен быть меньше чем у родителя и быть блочным.
Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.
Адекватное подчеркивание ссылок
Как исправить поведение text-decoration: underline
За и против. Оформление незагруженных изображений.
Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.
Управляем поведением font-face в CSS
Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.
Старт курса по архитектуре JavaScript приложений в SmartJS академии
Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии
Как прижать блок к правому краю?
Но блок вообще никак не хочет переместиться на другую сторону экрана((( Что делать?
- Вопрос задан более трёх лет назад
- 83993 просмотра
Оценить 1 комментарий
- Вконтакте
- Вконтакте
Включи логику.
Ты задал абсолютное позиционирование, вырвав тем самым элемент из потока.
И пытаешься задать ему обтекание.
Внимание вопрос: какие элементы его будут обтекать, если сам элемент вырван из потока?
Вывод: float для твоей задачи не подходит.
Думай дальше. Ты задал позиционирование элементу. Какие свойства задают позицию блоков?
Догадался уже, наверное — top, left, right, bottom.
CSS. All the ways to align elements left and right.
A short history lesson that probably most front-end devs know. But I didn’t so I decided to share. Plus there is a little trick at the end that might be surprising for some of you.
Problem description
Let’s say that we have the following elements to style.
And the desired end effect will be:
Hope my PAINT skills are enough to illustrate the problem. Two items on the left and one item on the right. Let’s take a look at our options. 🙂 HTML code is at the bottom of this article.
CSS 1.0
Historically how it was done (and you still have that option). You can use floats. In order to achieve what you want you can wrap the div 1 and 2 in a parent div and this is what you get:
This will work however, there 2 problems with this approach.
- One if one of the elements turns out to be bigger then the container it will go beyond its border (after all the element is floated so removed from the normal rendering of the DOM). So we have to apply a clearfix.
- Two without appropriate media queries the elements will start to overlap one another. If the user shrinks the browser too much.
As I mentioned both problems have a solution but still it is something that you have to think about. But if you have to support some ancient browser you got to do what you got to do :(.
CSS 2.1:
And extension to the previous version of the spec. It brought the property: positioning. It can take a couple of values. But the one that interests us is: absolute and relative. How it works it described well all over the internet. So I will not try to reinvent a wheel.
All I have to do is set the relative positioning on the container and absolute on the right wrapper (left wrapper will be aligned to the left automatically) and then set right property to 0. Meaning zero pixels from the right. The effect will be basically the same as above but no need for a clearfix. The browser will automatically adjust parent dimensions to fit all the children.
The elements, however, will still overlap if we shrink the browser. This is a good solution. It will work in all browsers. But still, let’s explore other options.
CSS 3: Flex+ justify-content: space-between
So in CSS3, we got the new way of positioning elements aka: flexbox. It is a powerful and intuitive tool. That again volumes have been written about. The article I like the most about can be found under that link. All I have to do is put the display: flex on the container element and add justify-content: space-between. All it means is will put even space between child elements along the main axis (default is the horizontal line). And since we have just two elements (left-wrapper and right-wrapper) it works. As even space in case of just two elements means max available space.
Again this is a good solution. If you don’t have to support IE6. As the elements will not overlap. The scroll bar will appear. Again modern responsive design should take that into account but mistakes happened and at least this way the content is still usable.
Flex grow 1
There is more than one way to skin a cat. Especially with flexbox. Let’s assume that for some bazar reason you can’t use the wrapping div. Tha the tree div`s that contain the number is all you got (This is a good interview question 🙂 ).
Again we can use flex:1 on the second element. This is a shorthand notation for the flex: 1 0 auto; or you can just write flex-grow: 1. All it means that we want element 2 to grow as much as possible without breaking line. This, however, has a problem if you want to add hover effect on the second element it will be placed on the entire large element and it may or may not look desirable. The workaround would be of course to add a 4'th element between 2 and 3 and grow it. As I said there is more than one way to skin a cat.
Final the most clever solution:
If for some reason you don't want to add an extra element. All you have is a container and 3 divs you can do something very clever. Place the display: flex on the container and then margin-right: auto on the second element.
It will get you this:
And that’s it I obviously didn’t cover some other ways to do this most notably CSS grid or using display: table or fiddling with the flex-basis property. But that is because I believe those solutions are overkill. And way too complicated for something this simple. And as I like to quote the master: simplicity is a prerequisite for reliability.