Forum PHP.pl > [CSS] rozciąganie diva do końca wierszza

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] rozciąganie diva do końca wierszza

stellatus

2.02.2020, 15:25:02

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

aras785

2.02.2020, 17:13:54

Wypadałoby używać już flex.. + nie pisać w inline, nawet na potrzeby forum.

https://jsfiddle.net/j45mdxb1/ (użyłem scss)

trueblue

2.02.2020, 17:13:57

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.

stellatus

2.02.2020, 21:21:47

@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".

aras785

2.02.2020, 22:16:35

SCSS

stellatus

3.02.2020, 15:34:12

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

trueblue

3.02.2020, 15:38:43

Do .menu należy dodać:

Kod

flex-wrap: wrap;

Zerknij: https://getbootstrap.com/docs/4.4/layout/grid/ i zacznij korzystać.

stellatus

15.02.2020, 18:17:18

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.