How can I increase the width or height of the div it is in while moving an item independently?

user_15858500 0
Viewed 95

I want to prevent the "Salgın" text from hitting other articles while moving it in the green divin. I saw that it is possible to do this with the "relative" code. The question is: While moving the text, the height and width of the green divin increase according to its position at the same time. When I give padding or margin to the text "Salgın", the others should not be affected, but the height or width of the green divin will increase.

Or let me put it like this: When I give a position to the "Salgın" article, the height or width of the divin it is located in should increase, but while this happens, the position of the other articles should not change in any way and must be all in the same div.

enter image description here

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #444444;
  font-family: Roboto, sans-serif;
  font-size: 24px;
}

#hepsi {
  background-color: #FC0;
  width: auto;
  height: auto;
}

#deneme {
  display: flex;
  justify-content: center;
}

#sol {
  float: left;
  width: auto;
  height: auto;
  background-color: #666;
  line-height: 0;
}

#orta {
  float: left;
  width: auto;
  height: auto;
  background-color: #0C0;
}

#sag {
  float: left;
  width: 300px;
  height: auto;
  background-color: #FF6;
}

#kitapfoto {
  width: 186px;
  height: 273px;
}

#kitapadi {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  font-size: 30px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#yayinyili {
  ,
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#kitapturu {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#okuyucupuani {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#benimpuanim {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
<div id="hepsi">
  <div id="deneme">
    <div id="sol"> <img id="kitapfoto" src="img/s9PBDwAAQBAJ.jpg" /> </div>
    <div id="orta">
      <div id="kitapadi">Salgın</div>
      <div id="yayinyili">Yayın yılı : 2013</div>
      <div id="kitapturu">Tür : Zombi</div>
      <div id="okuyucupuani">Okuyucu Puanı : 8.8/10</div>
      <div id="benimpuanim">Benim Puanım : 6.8/10</div>
    </div>
    <div id="sag">Sağ </div>
  </div>
</div>

css html
1 Answers

This might be completely wrong but is this what you are after?

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #444444;
  font-family: Roboto, sans-serif;
  font-size: 24px;
}

#hepsi {
  background-color: #FC0;
  width: auto;
  height: auto;
}

#deneme {
    display: flex;
    justify-content: center;
    width: 740px;
    margin: auto;
}

#sol {
  display: flex;
  flex-grow: 1;
  background-color: #666;
  line-height: 0;
  max-height: 273px;
}

#orta {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  background-color: #0C0;
}

#orta:hover #kitapadi{
  order: 6;
  margin-top: 150px;
}

#orta:hover #yayinyili{
  margin-top: 34px;
}


#sag {
  display: flex;
  flex-grow: 1;
  width: 300px;
  background-color: #FF6;
  max-height: 273px;
}

#kitapfoto {
  width: 186px;
  height: 273px;
}

#kitapadi {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  font-size: 30px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  order: 1;
}

#yayinyili {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  order: 2;
}

#kitapturu {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  order: 3;
}

#okuyucupuani {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  order: 4;
}

#benimpuanim {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  order: 5;
}
<div id="hepsi">
  <div id="deneme">
    <div id="sol"> <img id="kitapfoto" src="img/s9PBDwAAQBAJ.jpg" /> </div>
    <div id="orta">
      <div id="kitapadi">Salgın</div>
      <div id="yayinyili">Yayın yılı : 2013</div>
      <div id="kitapturu">Tür : Zombi</div>
      <div id="okuyucupuani">Okuyucu Puanı : 8.8/10</div>
      <div id="benimpuanim">Benim Puanım : 6.8/10</div>
    </div>
    <div id="sag">Sağ </div>
  </div>
</div>

user_50579200
Related