Bonjour ! je souhaite faire une page d'actu où on scroll sur la droite pour voir la suite mais les div se mettent automatiquement en dessous quand elles arrivent à la fin de la div globale (je sais pas si c'est très clair mais voici mon code)

Html :

<div id="actu">
	<h1>Actualité</h1>
	<div id="actupage"></div>
	<div id="actupage"></div>
	<div id="actupage"></div>
	<div id="actupage"></div>
	<div id="actupage"></div>
	<div id="actupage"></div>
	<div id="actupage"></div>
</div>

Css :

#actu {
	height: 250px;
	background-color: white;
	margin: 50px;
	margin-bottom: 0px;
	padding: 5px;
	overflow-x: scroll;
}

#actupage {
	position: relative;
	float: left;
	height: 150px;
	width: 200px;
	background-color: white;
	border: solid;
	border-color: lightblue;
	margin: 10px;
	margin-top: 0px;
}

Donc comment faire pour que les div se mettent bien sur la meme ligne et qu'on puisse scroll vers la droite ? Merci d'avance !! C:

-
Edité par PakiPaaaaaa 9 janvier 2022 à 16:39:13

les div etant de type block elles occupent 100% de la largeur et provoquent un retour a la ligne par defaut pour faire ce que vous cherchez essayer de les mettre tous dans un conteneur et sur ce conteneur en css vous faites un display flex

flexdirection row

flexwrap nowrap

et overflow-x scroll ca devrait le faire

Edit: le conteneur en question dans votre cas est actu

-
Edité par zvheer 9 janvier 2022 à 16:45:36

Bonjour, un identifiant est unique dans le document, vous ne pouvez avoir plusieurs id="actupage".

utiliser des class plutôt.

Hello, sinon tu as une solution alternative ici (sans flex)

https://stackoverflow.com/questions/718891/how-to-make-a-div-not-wrap

#actu {
            white-space: nowrap;
            height: 250px;
            background-color: white;
            margin: 50px 50px 0;
            padding: 5px;
            overflow-x: scroll;
        }

        .actupage {
            vertical-align: top;
            white-space: normal;
            display: inline-block;
            height: 150px;
            width: 200px;
            background-color: white;
            border: solid lightblue;
            margin: 0 10px 10px;
        }

<div id="actu">
    <h1>Actualité</h1>
    <div class="actupage"></div>
    <div class="actupage"></div>
    <div class="actupage"></div>
    <div class="actupage"></div>
    <div class="actupage"></div>
    <div class="actupage"></div>
    <div class="actupage"></div>
</div>

Bon courage