• 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

VPS Starter Arubacloud
+1 głos
297 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 (605,260 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 (605,260 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 (605,260 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 431 wizyt
pytanie zadane 20 września 2016 w HTML i CSS przez wgnsy123 Początkujący (410 p.)
0 głosów
2 odpowiedzi 114 wizyt
pytanie zadane 31 stycznia 2020 w HTML i CSS przez Pamix Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 330 wizyt
pytanie zadane 17 grudnia 2016 w HTML i CSS przez Apsik Użytkownik (990 p.)

93,025 zapytań

141,990 odpowiedzi

321,293 komentarzy

62,374 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...