3 Div’s 100%, 30% each, one on the left another in the middle and one on the right

Asked

Viewed 83 times

-1

Hello I have a problem in this basic CSS, I have a father div 100%, I need the first son to stick to the left the other in the middle and the other on the right.

I tried something with Nth-Child but it didn’t do me much good because it will be a Carrousel.

Hug!

<style type="text/css">

.pai {
    width: 100%;
    height: 100px;
    background: black;
    text-align: center;
}

.filho {
    width: 30%;
    height: 100px;
    background: rebeccapurple;
    display: inline-block;
}

</style>

<div class="pai">

    <div class="filho"></div>
    <div class="filho"></div>
    <div class="filho"></div>

</div>
html css

2 answers

1

Try Flexbox, what do you think?

     body{padding: 0;margin: 0;}
	.pai{display: flex;justify-content: center;}
	.filho{padding: 20px;border: 1px solid; width: 20%; flex-grow: 1;margin: 10px;}
<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
</head>
<body>
	<div class="pai">
		<div class="filho">Filho1</div>
		<div class="filho">Filho2</div>
		<div class="filho">Filho3</div>
	</div>
</body>
</html>

  • Thanks, Hug!

1


To hold 3 elements of equal dimensions in a container, you have to use something that can calculate these exact dimensions, because think to me, when dividing 100/3 we have an infinite number, so setting the width directly would not be the ideal resolution, then you can get that result with the property flex of flexbox.

.pai {
  display: flex;
}
.filho {
  flex: 1;
  text-align: center;
  border: 1px black solid;
}
<div class="pai">

    <div class="filho">esquerda</div>
    <div class="filho">centro</div>
    <div class="filho">direita</div>

</div>

Flexbox

Flex property

Self-prefill

  • Thanks, Hug!

  • I didn’t know the flex property, it was all I needed! vlw

  • 1

    @Josimara, for nothing, but watch out for support between browsers, as the older ones do not support this property, you can get information here https://caniuse.com/#feat=flexbox

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.