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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

Hello, I have a problem with this basic CSS, I have a 100% parent div, I need the first child to stick to the left, the other one in the middle and the other one to the right.

I tried something with nth-child but it did not serve me much because it will be a carrousel.

Hugs!

<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

asked by anonymous 27.11.2017 / 14:38

2 answers

1

Try using 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>

27.11.2017 / 14:52

Prevent one image from overlapping another in the input file Error in java code read GSON: java.lang.NullPointerException

score 1 · Accepted Answer

To behave like 3 elements of equal size in a container, you will have to use something that can calculate these exact dimensions, because think with me, dividing 100/3 we have an infinite number, so setting the width directly would not be the ideal resolution, then you can get this result with the flex property 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

Autoprefixer