Inserer une liste à 3 colonnes dans Div Scrollable

Inserer une liste à 3 colonnes dans Div Scrollable Trier liste en 3 colonnes » Forum - Bureautique Créer unr liste déroulante à 3 colonnes (Résolu) » Forum - Programmation Liste déroulante avec Excel » Conseils pratiques - Excel [MySQL] liste des doublons sur 3 colonnes » Forum - Webmaster SOS: div 3 colonnes » Forum - HTML

Bonjour,
Alors voila je suis en train de coder mon site web perso dont la partie Portfolio, j'ai décidé de faire mon porte folio avec des listes et en choisissant un max-width, définir le nombre de colonnes.
Cependant je veux que ces contenus restent dans une div et ne débordent pas, et jouer avec le overflow pour mettre une barre de scroll.
Mais j'ai un cherché sur le web et je ne trouve pas la bonne solution.
Quelqu'un saurait m'aider ?

Voici mon site web: hugorobitaillie.com

Le html de la page Portfolio

 <!DOCTYPE html> <html lang="fr">   <head>     <meta charset="utf-8">     <title>Hugo Robitaillie</title>     <link rel="stylesheet" href="css/style.css">     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">    </head>   <body>     <div id="page">       <div id="menu">         <div>           <div class="content">             <ul>               <li>                 <a href="index.html">                   <img src="img/logo.png" alt="logo insidponnible">                 </a>               </li>               <li>                 <a href="about.html">À PROPOS</a>               </li>               <li>                 <a href="#">PORTFOLIO</a>               </li>               <li>                 <a href="#">SERVICES</a>               </li>               <li>                 <a href="#">CONTACT</a>               </li>             </ul>           </div>           <div class="content" id="mentions">             <p> À propos . © hugo robitaillie 2018</p>           </div>         </div>       </div>       <div id="droite">           <div id="parcour" class="parr">             <div class="container">               <div class="container" id="portfolio">                 <div id="top">                   <h2>PORTFOLIO</h2>                 </div>                 <div>                   <div id="contenu-portfolio">                       <ul id="list-portfolio">                         <li>                           <a href=""><img src="img/pfgraek.png" alt=""> </a>                         </li>                         <li>                           <a href=""><img src="img/pfgraek.png" alt=""> </a>                         </li>                         <li>                           <a href=""><img src="img/pfgraek.png" alt=""> </a>                         </li>                         <li>                           <a href=""><img src="img/pfgraek.png" alt=""> </a>                         </li>                         <li>                           <a href=""><img src="img/pfgraek.png" alt=""> </a>                         </li>                         <li>                           <a href=""><img src="img/pfgraek.png" alt=""> </a>                         </li>                       </ul>                   </div>                 </div>               </div>             </div>         </div>       </div>      </div>   </body> </html>  



Le Css du site ( page portfolio en bas)

 body{   margin: 0px;   font-family: 'Montserrat', sans-serif; } h2 {   text-align: center;     text-transform: uppercase;     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;     font-weight: 700; } h4{   text-decoration: underline; }    /*------------------------------------------*\                   Accueil \*------------------------------------------*/    #menu{   float: left;   width: 15%;   min-height: 100vh;   background-color: #262626;   color: #e3e3e3;  } #menu ul{   display: inline-block;   text-align: center;  } #menu li{     list-style-type : none;     margin-top: 50px;     margin-bottom: 50px;     font-weight: bold; } #menu a{   color: #e3e3e3;;   text-decoration: none; } #menu img{ width: 50%; } #mentions{   height: 30vh;   position: relative; } #mentions p {   position: absolute;   bottom: 0;   font-size: 12px;   padding-left: 10%; } #droite{   float: left;   background-image: url("../img/bg.png");   background-repeat: no-repeat;   background-position: right;   background-size: 100%;   background-attachment: fixed;   width: 85%;   min-height: 100vh; } #Cercle{   color: #e3e3e3;   width: 400px;   height:  400px;   margin-top: 150px;   background-color: #262626;   border-radius: 50%;   display: inline-block;   text-align: center;   border: 15px solid #e6b300;   box-shadow: 0 0 45px 0 #262626 ; } #contenu{   padding-top: 100px; } .titrepage{   font-size: 25px;   font-weight: 900; } #buttonaccueil{   padding-top: 40px;  } #buttonaccueil p{   margin: 0px 120px;   padding: 10px;   border: 2px solid #FFF; } #buttonaccueil a{   color: #e3e3e3;   text-decoration: none; }    /*------------------------------------------*\                   About \*------------------------------------------*/   #about.container{   padding: 50px 15%; } #about{   margin: 3% 10%;   color: #e3e3e3;   background-color: #262626;   border-radius: 5%;   border: 15px solid #e6b300;   box-shadow: 0 0 45px 0 #262626 ; } #about-content img{   width: 20%;   float: left;   border-radius: 50%;   margin: 100px 0px 0px 50px;  } .avatar{  } #desc{   flex-basis: 70%;   padding: 15px;   margin-left: 150px;   height: 100%;   text-align: justify; }  #desc p{   font-size: 15px;   margin-left: 100px;   margin-right: 100px; } #menuabout{   padding-bottom: 20px;   display: inline-block;   justify-content: center; } #menuabout li{   list-style-type : none;   font-weight: bold;   display: inline-block;   float: left;   margin-left: auto;   margin-right: auto;   }   #menuabout li a {   color: #e3e3e3;;   text-decoration: none;   margin-left: 25px;   margin-right: 25px; }    /*------------------------------------------*\                   Parcour \*------------------------------------------*/    #parcour.container{   padding: 50px 15%; } #parcour{   margin: 3% 10%;   color: #e3e3e3;   background-color: #262626;   border-radius: 5%;   border: 15px solid #e6b300;   box-shadow: 0 0 45px 0 #262626 ; } #parcour-desc{   flex-basis: 70%;   padding: 15px;   margin-left: 50px;   margin-right: 50px;   height: 100%;   text-align: justify; }    /*------------------------------------------*\                   Portfolio \*------------------------------------------*/ #droite-portfolio{   float: left;   background-color: #F0F0F0;   min-height: 100vh;   width: 85%; } #list-portfolio img{   width: 240px; } #list-portfolio{   overflow: scroll; } #list-portfolio li{   float: left;   height: 320px;   padding: 0 1px 1px 0;   width: 240px;   overflow: hidden;   } #parcour .parr{   height:500px;   overflow:auto }  

Je vous remercie d'avance

Forum

Inserer une liste à 3 colonnes dans Div Scrollable Trier liste en 3 colonnes » Forum - Bureautique Créer unr liste déroulante à 3 colonnes (Résolu) » Forum - Programmation Liste déroulante avec Excel » Conseils pratiques - Excel [MySQL] liste des doublons sur 3 colonnes » Forum - Webmaster SOS: div 3 colonnes » Forum - HTML

Web: www.shapebootstrap.net

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed