Grow DIV according to content

Asked

Viewed 81 times

0

.box {
height: 42px;
width: 800px;
background: aliceblue;
}
.inside-box {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.icon-box {
width: 24px;
height: 24px;
background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
}
<div class="box">
<div class="inside-box">
<div class="icon-box"></div>
<a href="#">Fazer Download</a>
</div>
</div>

I would like to know how I do for the DIV (.Inside-box) to be on the edge of the "Download" text, without it inheriting the width of the parent DIV (.box). If anyone has a solution I’d appreciate it!

html css

  • use relative measures in %

  • the problem is not the size, it inherits the width of the DIV with the class "box", I want it to be limited to the text or link "Download"...

2 answers

0


You have to put on the inside one width, but that this width be "flexible", one of the options is to put width: max-content; I added an edge to the div just so you see that it only occupies the width of the content itself, not the width of the Father

.box {
height: 42px;
width: 800px;
background: aliceblue;
}
.inside-box {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
border: 1px solid;
width: max-content;
}
.icon-box {
width: 24px;
height: 24px;
background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
}
<div class="box">
  <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download</a>
  </div>
</div>

<div class="box">
  <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download agora, clique aqui</a>
  </div>
</div>

  • Obg. Bro, you saved my life!

  • @Brunob.Rabbit dmr, I’m glad I could help!

0

Here’s your neat HTML code, was with an extra div.

<div class="box">
  <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download</a>
</div>
</div>



.box {
height: 42px;
width: 800px;

}
.inside-box {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:150px;
background: aliceblue;
display: block;
margin-left: auto;
margin-right: auto
}
.icon-box {
width: 24px;
height: 24px;
background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
}

From what I understand it is this: I put a fixed size to the ' Download ', centered, and the background, put inside it.

Browser other questions tagged html css

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