I managed to create a card exactly how i wanted, but when trying to put multiple of them, they go below each other, instead of at the side.
I tried using different displays (on CSS), but if I do that, they don't go to the center.
.main {
height: 125vh;
background: #141414;
width: 100%;
padding-left: 35px;
}
.card {
margin: 100px auto 0;
display: inline-block;
width: 400px;
height: 600px;
perspective: 700px;
align-items: center;
}<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
Your .card elements are div html tags. These are display: block by default, meaning they will not go inline because they take up the whole width of the container.
To make them go inline, I would recommend using flexbox on the parent element (I assume .main), although there are many approaches:
.main {
height: 125vh;
background: #141414;
width: 100%;
padding-left: 35px;
display: flex;
}
To get the behavior with wrapping/overflow that you want, you will want to research flex properties to get the desired result.
CodePudding user response：
Use Bootstrap rows for to flex your items into a row. Then you use Bootstrap's column grid-system for sizing.
.main {
height: 125vh;
background: #141414;
width: 100%;
padding-left: 35px;
}
.card {
margin: 100px auto 0;
display: inline-block;
height: 600px;
perspective: 700px;
align-items: center;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
<div >
<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="assets/img/img4.jpeg" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="assets/img/img4.jpeg" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="assets/img/img4.jpeg" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="assets/img/img4.jpeg" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Solution w/ out Bootstrap: Set flex on main, then you can use width: calc(100%/4); on each card if you had four for example. Then you can set a min-width breaking point for resizing.
.main {
height: 100%;
background: #141414;
width: 100%;
padding-left: 35px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card {
display: inline-block;
height: 600px;
width: calc(100%/4);
min-width: 200px;
}<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
The fastes way to do that with your code is to add in your main class display:flex;
.main {
height: 125vh;
width: 100%;
padding-left: 35px;
display: flex;
}
.card {
margin: 100px auto 0;
display: inline-block;
width: 400px;
height: 600px;
perspective: 700px;
align-items: center;
}<div >
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<h2>ProObra</h2>
</div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/50" />
<h2>ProObra</h2>
</div>
<div >
<h3>Sistema para construtoras</h3>
<p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
</p>
</div>
</div>
</div>
</div>
</div>
</div>