• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Div nie reguje na margin-top

Object Storage Arubacloud
+1 głos
178 wizyt
pytanie zadane 5 listopada 2021 w HTML i CSS przez Pico Obywatel (1,330 p.)
zamknięte 5 listopada 2021 przez Pico

Witam. Mam następujący problem. Mam kod który wyświetla fakturę i chciałbym przenieść div w którym znajdują się miejsca na podpisy o 100px niżej, jednak on nie reguje na margin-top. Jest to na samym dole kodu

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body style="font-family: DejaVu Sans">
        <h1>{{$details->seller}}</h1>
        <h2>Faktura nr: {{$details->created_at->format('d/m/Y')}}</h2>
        <h2>Data wystawienia: {{$details->created_at}}</h2>
        <table style="width: 100%; margin-bottom: 20px;">
            <tr>
                <th style="width: 50%; text-align: left;"><b>Sprzedawca</b></th>
                <th style="width: 50%; text-align: left;"><b>Klient</b></th>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->seller}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->client}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                        <label>NIP: </label>
                      <span>{{$details->seller_nip}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <label>NIP: </label>
                      <span>{{$details->client_nip}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->seller_postcode}} {{$details->seller_city}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->client_postcode}} {{$details->client_city}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>ul. {{$details->seller_street}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>ul. {{$details->client_street}}</span>
                    </div>
                </td>
            </tr>
        </table>
        <hr>
        <table style="margin-top: 20px;" width="100%" border=1>
            <tr>
                <th>Lp.</th>
                <th>Nazwa</th>
                <th>Jedn.</th>
                <th>Ilość</th>
                <th>Cena netto</th>
                <th>Stawka</th>
                <th>Wartość netto</th>
                <th>Wartość brutto</th>
            </tr>
            <tbody>
                @foreach($products as $product)
                    <tr>
                        <td style="text-align: center;">{{$id += 1}}</td>
                        <td>{{$product->name}}</td>
                        <td style="text-align: center;">{{$product->unit_of_measure}}</td>
                        <td style="text-align: center;">{{$product->count}}</td>
                        <td style="text-align: right;">{{$product->price_netto}}</td>
                        <td style="text-align: center;">{{$product->vat_rate}}%</td>
                        <td style="text-align: right;">{{$product->price_netto * $product->count}}</td>
                        <td style="text-align: right;">{{$product->price_brutto * $product->count}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div style="width: 100%; margin-top: 20px;">
            <div style="width: 50%; float: left;">
                <table width="100%" border=1>
                    <tr>
                        <th></th>
                        <th>Wartość netto</th>
                        <th>Kwota VAT</th>
                        <th>Wartość brutto</th>
                    </tr>
                    <tbody>
                        <tr>
                            <td>Razem</td>
                            <td style="text-align: right;">{{$details->final_price_netto}}</td>
                            <td style="text-align: right;">{{$details->final_price_vat}}</td>
                            <td style="text-align: right;">{{$details->final_price_brutto}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="text-align: right; width: 50%; float: left;">
                <p style="margin-top: 0px;">Wartość netto: {{$details->final_price_netto}} PLN</p>
                <p>Wartość VAT: {{$details->final_price_vat}} PLN</p>
                <p style="font-weight: bold;">Do zapłaty: <b style="color: #0066ff">{{$details->final_price_brutto}} PLN</b></p>
            </div>
        </div>
        <div style="clear: both; width: 100%; margin-top: 100px;">
            <div style=" width: 50%; float: left;">
                <p>....................................</p>
                <p>Podpis sprzedawcy</p>
            </div>
            <div style=" width: 50%; float: left; text-align: right;">
                <p>....................................</p>
                <p>Podpis nabywcy</p>
            </div>
        </div>
    </body>
</html>

 

komentarz zamknięcia: Odpowiedź w komentarzu
komentarz 6 listopada 2021 przez pawlitto21 Nowicjusz (220 p.)
Po pierwsze powinieneś wszystko przenieść osobno do pliku style.css np.

Nie jest pożądane w ten sposób deklarować style strasznie niewygodne.

Dajesz prawy myszki na elemencie - inspektor w chrome i kombinuj na pewno się uda tam na żywo style definiujesz , ja bym spróbował coś display jako block - nadrzędny i inline block podrzędny i pobawił się width jako % aby odpowiendnio ułożyło dany element a następnie jako margin / lub top i deklarujesz odstęp.

1 odpowiedź

+3 głosów
odpowiedź 5 listopada 2021 przez Comandeer Guru (601,110 p.)

Jest to spowodowane floatami. Element div powyżej, mający 100% i margin-top: 20px jest pusty z powodu dzieci mających float i przez to nie działa margines kłopotliwego diva.

Rozwiązaniem jest dodanie do diva z margin-top: 20px stylu display: flow-root, dzięki czemu div się rozciągnie na wysokość swoich dzieci. Alternatywnie możesz zastosować clearfix.

komentarz 5 listopada 2021 przez Pico Obywatel (1,330 p.)
Jest pewien problem. Jeśli użyję tego display:flow-root to nagle znika to co powinno być w tym divie, a kiedy używam clearfixa to nagle skrypt odpowiedzialny za przetwarzanie html'a na pdf nie może tego przetworzyć i dostaję komunikat że za długi czas oczekiwania
komentarz 5 listopada 2021 przez Comandeer Guru (601,110 p.)

Jeśli użyję tego display:flow-root to nagle znika to co powinno być w tym divie

Hm, nie zauważyłem, żeby cokolwiek zniknęło: https://codepen.io/Comandeer/pen/oNeErmY

komentarz 5 listopada 2021 przez Pico Obywatel (1,330 p.)

Hmm a więc możliwe że skrypt do konwersji na pdf tego nie przyjmuje. W każdym razie problem rozwiązało to

<br style="clear: both;" />

Tak wiem że nie jest to zbyt poprawna metoda ale jest to sytuacja podbramkowa

komentarz 5 listopada 2021 przez Comandeer Guru (601,110 p.)

Nie wiem, czego używasz do tworzenia PDF-ów, ale może warto zastanowić się nad zastosowaniem Puppeteera. Z racji tego, że to odpala Chrome'a, to możesz "drukować" strony do PDF-a dokładnie tak, jakbyś to robił w przeglądarce. Dzięki temu zdecydowanie więcej CSS-a byłoby obsługiwane.

Podobne pytania

0 głosów
2 odpowiedzi 381 wizyt
pytanie zadane 20 września 2016 w HTML i CSS przez wgnsy123 Początkujący (410 p.)
0 głosów
2 odpowiedzi 93 wizyt
pytanie zadane 31 stycznia 2020 w HTML i CSS przez Pamix Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 282 wizyt
pytanie zadane 17 grudnia 2016 w HTML i CSS przez Apsik Użytkownik (990 p.)

92,568 zapytań

141,420 odpowiedzi

319,620 komentarzy

61,954 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...