Ankündigung

Einklappen
Keine Ankündigung bisher.

Seitenteilung (Links/Rechts) werden nicht ausgefüllt.

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Seitenteilung (Links/Rechts) werden nicht ausgefüllt.

    Hi,
    ich probiere mich gerade ein wenig in HTML und CSS. Benutze dazu Bootstrap.
    Mein problem ist, dass ich meine Seite in zwei Teile aufgeteilt habe. Diese Teile jedoch nicht komplett ausgefüllt werden sondern Links und rechts jeweils an die Wand gedrückt werden. Danke im Voraus für eure Hilfe.

    HTML-Code:
    <div class="container-left">
              <div class="figure col">
                <img src="<?php echo $idFront ?>" class="figure-img rounded-3 w-25 border border-warning" alt="idFront">
              </div>
              <div class="figure col">
                <img src="<?php echo $idBack ?>" class="figure-img rounded-3 w-25 border border-warning" alt="idBack">
              </div>
            </div>
            <div class="container-right">
              <div class="order">
                <div class="col">
                <table class="table table-dark table-striped">
                  <tr>
                     <th scope="col">Nr.</th>
                     <th scope="col">Drink</th>
                     <th scope="col">Price</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
                     <th scope="row">2</th>
                     <td>Whiskey</td>
                     <td>7.50€</td>
                   </tr>
                </table>
              </div>
              </div>
          </div>
    Code:
    .container-left{
      float: left;
      width: 50%;
      padding-right: var(--bs-gutter-x, 0.75rem);
      padding-left: var(--bs-gutter-x, 0.75rem);
      margin-right: auto;
      margin-left: auto;
    }
    
    .container-right{
      float: right;
      width: 50%;
      padding-right: var(--bs-gutter-x, 0.75rem);
      padding-left: var(--bs-gutter-x, 0.75rem);
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }
    
    .container-right table{
      width: 100%;
    }

  • #2
    Vergiss float. => Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

    Aber wenn du schon Bootstrap einsetzt:
    HTML-Code:
    <div class="row">
      <div class="col-6"></div>
      <div class="col-6"></div>
    </div>

    Kommentar


    • #3
      Danke dir. Leichter hätte eine Lösung nicht sein können.

      Kommentar

      Lädt...
      X