Hoe krijg divs naast elkaar en onder elkaar

Door Mohamed nvt op 11-09-2022 22:42

6.665 views

Ik ben bezig met het volgende:

Ik probeer circa 20 foto op een pagina weer te geven met elk eigen tekst eronder.
Ik gebruik hiervoor de volgende code:


<div class="main">
  <div class="content">
        <p> Schilderijen</p></div>
  </div>
  <div class="img-with-text">
    <img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
    <p>nr.261 60 x60</p>
  </div>
 <div>
      <img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
     <p>nr.267- 80x80</p>
    </div>
</div>

CSS code


 .content {
    float: left;
    width: 14%;
    

  }
  .content P {
    padding-left: 40px;
    color: yellow;
    font-size: small;
    padding-right: 15px;
  }
  .plaatjes {
    float: left;
    margin-left: 40px;
    width: 50%;
  }
  .foto{
    color: #FFFFFF;
    margin: 10px;
  }
  .tekstonder {
    display: inline;
    text-align: center;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
  }
  .img-with-text {
    display: inline-block;
    margin-left: 40px;
    text-align: center;
    width: 250px;
  }
  .img-with-text img {
    margin: 0 auto;
  }

En het resultaat is het volgende:

http://jocke-overwater.nl/schilderijen%20copy.php

En Ik zou graag willen dat het zo eruit ziet en met elk eigen tekst eronder:
http://jocke-overwater.nl/schilderijen.php

Alvast bedankt voor het meedenken.

? Onbekende gebruiker

12-09-2022 09:49

Divs naast elkaar kan met CSS display: inline-block; . Als je meerdere divs naast elkaar wilt hebben kan je gebruik maken van CSS flex-box, dat geeft meer mogelijkheden. En CSS grid is voor als je een soort tabel-achtige opmaakt zoekt.

Jan Koehoorn

12-09-2022 12:12 gewijzigd op 12-09-2022 12:13

[quote="Mohamed nvt op 11/09/2022 22:42:56"]


<div class="main">
  <div class="content">
        <p> Schilderijen</p></div>
  </div>
  <div class="img-with-text">
    <img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
    <p>nr.261 60 x60</p>
  </div>
 <div>
      <img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
     <p>nr.267- 80x80</p>
    </div>
</div>

Ook even opletten: de css class img-with-text heb je eerst op de div en vervolgens op de img.
Dat lijkt mij niet de bedoeling ;-)

M Mohamed nvt

12-09-2022 12:28

Ad Fundum op 12/09/2022 09:49:23

Divs naast elkaar kan met CSS display: inline-block; . Als je meerdere divs naast elkaar wilt hebben kan je gebruik maken van CSS flex-box, dat geeft meer mogelijkheden. En CSS grid is voor als je een soort tabel-achtige opmaakt zoekt.

Ik wil maximaal telkens 2x divs naast elkaar hebben en de volgende divs onder elkaar totdat ik alle plaatjes heb.
Moet ik dan nog steeds gebruik maken van CSS flex-box? Hiermee heb ik geen ervaring nl.

[size=xsmall]Toevoeging op 12/09/2022 12:31:12:[/size]

Jan Koehoorn op 12/09/2022 12:12:47

[quote="Mohamed nvt op 11/09/2022 22:42:56"]
<div class="main">
  <div class="content">
        <p> Schilderijen</p></div>
  </div>
  <div class="img-with-text">
    <img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
    <p>nr.261 60 x60</p>
  </div>
 <div>
      <img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
     <p>nr.267- 80x80</p>
    </div>
</div>
Ook even opletten: de css class img-with-text heb je eerst op de div en vervolgens op de img.
Dat lijkt mij niet de bedoeling ;-)

Heel scherp! Betreffende class kwam maar een keer voor en ik heb het verwijderd, helaas biedt dat geen oplossing.

Jan Koehoorn

12-09-2022 13:31

Een voorbeeld met CSS grid:


<html>

<head>
    <style>
    html, body {
        font: 14px Verdana;
    }

    .container {
        margin:  0 auto;
        max-width: 320px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    </style>
</head>

<body>
    <div class="container">

        <div class="grid-container">
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
        </div>

    </div>
</body>

</html>

M Mohamed nvt

12-09-2022 14:00

Jan Koehoorn op 12/09/2022 13:31:26

Een voorbeeld met CSS grid:


<html>

<head>
    <style>
    html, body {
        font: 14px Verdana;
    }

    .container {
        margin:  0 auto;
        max-width: 320px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    </style>
</head>

<body>
    <div class="container">

        <div class="grid-container">
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
            <div class="grid-item"><img src="https://via.placeholder.com/150"></div>
        </div>

    </div>
</body>

</html>

Dankjewel voor dit voorbeeld en met gewone CSS lukt dit mij ook wel, daar het voorbeeld: http://jocke-overwater.nl/schilderijen.php
Vervolgens wil ik onder elk plaatje wat tekst hebben.
Hoe krijg ik dat nu voor elkaar met Grid?

Jan Koehoorn

12-09-2022 14:13


<html>

<head>
    <style>
    html, body {
        font: 14px Verdana;
    }

    .container {
        margin:  0 auto;
        max-width: 320px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    .caption {
        font-size: 0.6rem;
        text-align: center;
        padding-top: 8px;
    }
    </style>
</head>

<body>
    <div class="container">

        <div class="grid-container">
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 1</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 2</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 3</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 4</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 5</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 6</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 7</div>
            </div>
        </div>

    </div>
</body>

</html>

M Mohamed nvt

12-09-2022 14:23

Jan Koehoorn op 12/09/2022 14:13:03


<html>

<head>
    <style>
    html, body {
        font: 14px Verdana;
    }

    .container {
        margin:  0 auto;
        max-width: 320px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    .caption {
        font-size: 0.6rem;
        text-align: center;
        padding-top: 8px;
    }
    </style>
</head>

<body>
    <div class="container">

        <div class="grid-container">
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 1</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 2</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 3</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 4</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 5</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 6</div>
            </div>
            <div class="grid-item">
                <img src="https://via.placeholder.com/150">
                <div class="caption">Tekst bij afbeelding 7</div>
            </div>
        </div>

    </div>
</body>

</html>

Helemaal TOP en erg bedankt!

Ozzie PHP

12-09-2022 15:43

@Jan Koehoorn

Heeft class="grid-item" een specifieke functie?

Jan Koehoorn

12-09-2022 20:24

Ozzie PHP op 12/09/2022 15:43:21

@Jan Koehoorn

Heeft class="grid-item" een specifieke functie?

Nee, da's gewoonte. In de dagelijkse praktijk komt het vaak voor dat ik nog iets met die grid-items moet, vandaar ;-)

? Onbekende gebruiker

12-09-2022 21:43

Mohamed nvt op 12/09/2022 12:28:45

Moet ik dan nog steeds gebruik maken van CSS flex-box? Hiermee heb ik geen ervaring nl.

Van mij moet je helemaal niets, ik geef je alleen maar een idee hoe je iets zou kunnen doen. Het maakt mij ook niet uit of je dat doet met display-inline, flex, grid, floats, of met wat dan ook. Overigens, grid is zelfs lastiger dan flex, maar je hebt altijd mensen die dat soort dingen voor je willen uitwerken.

Reageren

Inloggen om te reageren