Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] rozciąganie diva do końca wierszza
stellatus
post 2.02.2020, 15:25:02
Post #1





Grupa: Zarejestrowani
Postów: 103
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

Go to the top of the page
+Quote Post
aras785
post 2.02.2020, 17:13:54
Post #2





Grupa: Zarejestrowani
Postów: 776
Pomógł: 155
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
Go to the top of the page
+Quote Post
trueblue
post 2.02.2020, 17:13:57
Post #3





Grupa: Zarejestrowani
Postów: 5 796
Pomógł: 1597
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.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 2.02.2020, 21:21:47
Post #4





Grupa: Zarejestrowani
Postów: 103
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
Go to the top of the page
+Quote Post
aras785
post 2.02.2020, 22:16:35
Post #5





Grupa: Zarejestrowani
Postów: 776
Pomógł: 155
Dołączył: 29.10.2009

Ostrzeżenie: (0%)
-----


SCSS
Go to the top of the page
+Quote Post
stellatus
post 3.02.2020, 15:34:12
Post #6





Grupa: Zarejestrowani
Postów: 103
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
Go to the top of the page
+Quote Post
trueblue
post 3.02.2020, 15:38:43
Post #7





Grupa: Zarejestrowani
Postów: 5 796
Pomógł: 1597
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ć.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 15.02.2020, 18:17:18
Post #8





Grupa: Zarejestrowani
Postów: 103
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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 4.04.2020 - 09:09