[CSS] rozciąganie diva do końca wierszza |
[CSS] rozciąganie diva do końca wierszza |
2.02.2020, 15:25:02
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Jak to zrobić, żeby niebieski div "dropdown_list4" rozciągał się do końca wiersza?
Kod <html> <head> <style> div { display: inline-block; } .div-padding { padding: 10px; } </style> </head> <div style="width: 100%; background-color: DodgerBlue;" class="div-padding"> <div class="div-padding" style="background-color: red; width: 60px;"><button>Tags</button></div> <div class="div-padding" style="background-color: green; width: 120px;">dropdown_list1</div> <div class="div-padding" style="background-color: red"> <div style="background-color: orange;">Autor: </div> <div style="background-color: DodgerBlue; width: 190px;">dropdown_list2</div> </div> <div class="div-padding" style="background-color: yellow"> <div style="background-color: orange">Kategorien: </div> <div style="background-color: DodgerBlue; width: 190px;">dropdown_list3</div> </div> <div class="div-padding" style="background-color: red;"> <div style="background-color: orange">Typen: </div> <div style="background-color: DodgerBlue;">dropdown_list4</div> </div> </div> </html> https://codepen.io/rudolph-reti/pen/oNgKZGq |
|
|
2.02.2020, 17:13:54
Post
#2
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
Wypadałoby używać już flex.. + nie pisać w inline, nawet na potrzeby forum.
https://jsfiddle.net/j45mdxb1/ (użyłem scss) Ten post edytował aras785 2.02.2020, 17:14:36 |
|
|
2.02.2020, 17:13:57
Post
#3
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
A nie myślałeś o tym, aby uzbroić stronę w responsywność? Teraz na sztywno poustawiałeś szerokości, a na mniejszej rozdzielczości nie pomieści się wszystko.
-------------------- |
|
|
2.02.2020, 21:21:47
Post
#4
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
@aras785 Dzięki, dużo nowych rzeczy się dowiedziałem. Za preprocesory CSS zabiorę się w swoim czasie. A dlaczego akurat SCSS, a nie LESS albo SASS?
Który polecacie najpierw do nauki? @trueblue No właśnie pomyślałem: Temat: CSS grid ze stalymi i procentowymi szerokosciami i nawet jestem zadowolony z efektu, ale chciałbym też opanować robienie gridu zarówno z wartościami procentowymi jak i stałymi, dlatego stworzyłem ten temat. To co napisał @aras785 będzie dla urządzeń "large". Teraz spróbuję dopisać CSS dla "medium" i "small". Ten post edytował stellatus 3.02.2020, 11:00:44 |
|
|
2.02.2020, 22:16:35
Post
#5
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
SCSS
|
|
|
3.02.2020, 15:34:12
Post
#6
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Ok, a jak "przełamuje się" tego flexa? Chciałbym teraz uzyskać "przełamanie" po divie "dropdown_list2":
http://srv19859.microhost.com.pl/2020-02-03_15h26_38.jpg Ten post edytował stellatus 3.02.2020, 15:35:36 |
|
|
3.02.2020, 15:38:43
Post
#7
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Do .menu należy dodać:
Kod flex-wrap: wrap; Zerknij: https://getbootstrap.com/docs/4.4/layout/grid/ i zacznij korzystać. -------------------- |
|
|
15.02.2020, 18:17:18
Post
#8
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Jestem bardzo wdzięczny. Mnóstwo się dzięki Wam nauczyłem.
Czytałem co nieco o Bootstrapie i oglądałem kurs, ale to było kilka miesięscy temu. Wydaje mi się, że nie muszę, przynajmniej na razie, bardzo się nim przejmować: https://www.youtube.com/watch?v=maMbiJGkbZ4 Potrzebowałem tego do stworzenia menu nawigacji fasetowej. Rezultat można zobaczyć tutaj. Ten post edytował stellatus 15.02.2020, 18:18:58 |
|
|
Wersja Lo-Fi | Aktualny czas: 25.04.2024 - 07:25 |