Html кнопка в правый угол

Как переместить кнопку в правый нижний угол div с помощью начальной загрузки?

Проблема в том, что я не могу выровнять кнопку ReadMore внизу. Я попытался использовать советы в этом SO-ответе, но безрезультатно. Здесь я создал скрипку своего кода, и я добавлю код ниже. Кто-нибудь знает, что я здесь делаю неправильно? Все советы приветствуются! Мой HTML выглядит так:

@media (min-width: 768px ) < .row < position: relative; >#read-more < position: absolute; bottom: 0; right: 0; >> 

5 ответов

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); @media (min-width: 768px) < .row < position: relative; >#read-more < position: absolute; bottom: 0; right: 0; >.col-sm-7 < position: absolute; width: 100%; height: 100%; >>

Иногда вам приходится работать против бутстрапов, чтобы получить то, что вы ищете, в основном, не используя их (pulls и т.д.). Я обновил вашу скрипку, и я считаю, что это близко к тому, что вы просили. Другая проблема заключалась в том, что ваша @media выбрасывала вещи из-за размера окна результатов.

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); .rel < position: relative; height:300px; width: 600px; >.read-more < position: absolute; bottom: 0; right: 0; >.background < background-image: url("http://placehold.it/600x300"); height: 300px; width: 600px; >>

Здесь есть две проблемы: в зависимости от того, что вы хотите достичь!

(Я думаю, это второй, который вы ищете!)

Первый:
если вы хотите разместить свой текст в нижнем правом углу всей страницы:

У вас есть position:relative в вашем CSS для .row .

Это означает, что все элементы внутри элемента с row класса будут помещены относительно этого элемента — поэтому ваш read больше может быть помещен только внутри него с вашим CSS (с отрицательными значениями справа и снизу он может быть снаружи, но все же относительно этого элемента).

Во- вторых:
Если вы хотите поместить свой текст в нижнем правом углу статьи

Родительский элемент для вашего #read-more имеет только высоту 20px , потому что текст Big Title в div выше относится только к этой высоте.
Поскольку ваш элемент #read-more является абсолютным, он не влияет на высоту.

Я пробовал установить height: 100%; на родительский элемент #read-more , но он не работает.
Таким образом, вам кажется, что вам нужно будет разместить свой #read-more elemnt вне своего родительского div прямо в статье, например:

Это связано с тем, что правая панель является только высотой содержимого, в данном случае заголовком и кнопкой.

Чтобы противостоять этому, вам нужно установить высоту.

Я добавил класс box-height в html и, поскольку изображение кажется максимальным на 141px [по крайней мере для меня, W7 PC], я установил высоту контейнера этой высоты ( 141px )

Здесь вы можете увидеть рабочий пример; http://jsfiddle.net/8pLjfq5u/18/

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

редактировать

Я бы посоветовал не устанавливать css-изменения в классы начальной загрузки в этом экземпляре.

В какой-то момент это изменение основного CSS укусит вас в отставание, когда вам нужно, чтобы он работал в соответствии с первоначальной сборкой.

Второе редактирование

Казалось бы, если вы просто переместите кнопку в div col-sm-12 , вы сможете получить желаемый результат.

Это также масштабируется и на мобильный вид, без необходимости добавлять дополнительные классы или атрибуты css.

Источник

Как поместить кнопку в правый нижний угол

Сделал кнопку. Ее нужно поместить в правый нижний угол и сделать фиксированной. Кнопка эта будет располагаться на taplink (для мобильных устройств в браузере).
Я поместил ее в левый нижний угол и сделал фиксированной, но как сделать так, чтобы она менялась в зависимости от разрешения? Я делал для разрешения 400×800, но может же быть и 300х600 и она будет совершенно другого размера и т.д. Код:

.wrapper < display: inline-flex; >.wrapper .icon < position: fixed; background-color: #AE978F; right: 0px; bottom: 0px; color: #ffffff; border-radius: 50%; padding: 15px; margin: 10px; width: 50px; height: 50px; font-size: 18px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); >.wrapper .tooltip < position: absolute; top: 0; font-size: 14px; background-color: #ffffff; color: #ffffff; padding: 5px 8px; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); >.wrapper .tooltip::before < position: absolute; content: ""; height: 8px; width: 8px; background-color: #ffffff; bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); >.wrapper .icon:hover .tooltip < top: -45px; opacity: 1; visibility: visible; pointer-events: auto; >.wrapper .icon:hover span, .wrapper .icon:hover .tooltip < text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); >.wrapper .whatsapp:hover, .wrapper .whatsapp:hover .tooltip, .wrapper .whatsapp:hover .tooltip::before

Источник

Stick button to right side of div

http://jsfiddle.net/kn5sH/ What do I need to add in order to stick the button to the right side of the div on the same line as the header? HTML:

1. The right side of the button should be x pixels away from the right edge of the div.
2. It should be on the same line as the header.
3. Should be contained in the div (stuff like float or relative positioning pops it out of the div visually)

What CSS techniques can be used to do this? Thanks.

8 Answers 8

Normally I would recommend floating but from your 3 requirements I would suggest this:

position: absolute; right: 10px; top: 5px; 

Don’t forget position: relative; on the parent div

Thanks, this works great. I tried this but forgot to the ‘top’ attribute which pushed it below the div.

Another solution: change margins. Depending on the siblings of the button, display should be modified.

It depends on what exactly you want to achieve.

If you just want to have it on the right, then I’d recommend against using position absolute, because it opens a whole can of worms down the line.

The HTML can also be unchanged:

the CSS then should be something along the lines of:

You can see it in action here: http://jsfiddle.net/azhH5/

If you can change the HTML, then it gets a bit simpler:

If you want to have the button on the same line as the Text, you can achieve it by doing this:

You an see that in action here: http://jsfiddle.net/EtqVh/1/

Cleary in the lest example you’d have to adjust the margin-top for the specified font-size of the

As you can see, it doesn’t get popped out of the , it’s till inside. this is achieved by two things: the negative margin on the , and the overflow: hidden; on the

I just saw that you also want it to be a bit away from the margin on the right. That’s easily achievable with this method. Just add margin-right: 1em; to the , like this:

Источник

Place a button right aligned

But

tags wastes some space, so looking to do the same with or .

The align attribute is deprecated in HTML 4.01 and unsupported in HTML5, use CSS text-align instead to achieve the same effect.

11 Answers 11

Which alignment technique you use depends on your circumstances but the basic one is float: right; :

You’ll probably want to clear your floats though but that can be done with overflow:hidden on the parent container or an explicit at the bottom of the container.

Floated elements are removed from the normal document flow so they can overflow their parent’s boundary and mess up the parent’s height, the clear:both CSS takes care of that (as does overflow:hidden ). Play around with the JSFiddle example I added to see how floating and clearing behave (you’ll want to drop the overflow:hidden first though).

If the button is the only element on the block :

If there are other elements on the block :

.border < border: 2px indigo dashed; >.d-table < display:table; >.d-table-cell < display:table-cell; >.w-100 < width: 100%; >.tar

 
The paragraph. lorem ipsum. etc.
 
The Button 
 

With flex-box :

Button with Text
 
Once upon a time in a .
 Read More. 
 
Only Button
 
The Button 
 
Multiple Buttons
 
Button 1 Button 2 

Another possibility is to use an absolute positioning oriented to the right:

This solution has its downsides, but there are use cases where it’s very useful.

a modern approach in 2019 using flex-box

with div tag

with span tag

This solution depends on Bootstrap 3, as pointed out by @günther-jena

Try Call to Action . This way you don’t need extra markup or rules to clear out floated elements.

sorry correction, it only works when you put «text-right» on the parent container for the anchor tag.

To keep the button in the page flow:

(put that style in a .css file, do not use this html inline, for better maintenance)

It is not always so simple and sometimes the alignment must be defined in the container and not in the Button element itself !

For your case, the solution would be

I have taken care to specify width=100% to be sure that take full width of his container.

I have also added padding:0 to avoid before and after space as with

element.

I can say that if is defined in a FSF/Primefaces table’s footer, the float:right don’t work correctly because the Button height will become higher than the footer height !

In this Primefaces situation, the only acceptable solution is to use text-align:right in container.

With this solution, if you have 6 Buttons to align at right, you must only specify this alignment in container 🙂

Источник