كيفية توسيع div وإدراج نص جديد دون تشويه كائنات أخرى في هذا div؟

المشكلة

أحاول إنشاء مربع يمكن توسيعه باستخدام رمز نص داخل منه. أريد أن يكون الرمز مرئيًا دائمًا ولا يتحرك ويظهر في القوس عندما تحوم فوقه. ومع ذلك ، عندما أقوم بتحميل النص ، فإنه يعيق تخطيط الرمز. راجع Fiddle .

سيكون من الأفضل أن يبقى الرمز في مكانه دون التحرك على الإطلاق. كيف يمكنني تحقيق هذا أفضل؟

هنا هو الرمز:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.box {
  width: 60px;
  height: 36px;
  background-color: #96ffd1;
}

.box:hover {
  width: 300px;
  -webkit-transition: width 0.5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 0.5s;
}

.box>i {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
}

span {
  height: 36px;
  vertical-align: middle;
  position: relative;
  display: none;
}

.box:hover span {
  display: table-cell;
  white-space: nowrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class='box'>
  
  Display when expanded
</div>
</div> </div>
0
إرفاق الرابط كمان بشكل صحيح من فضلك.
وأضاف المؤلف Dhaval Jardosh, مصدر
استخدم position: absolute؛
وأضاف المؤلف Dhaval Jardosh, مصدر

1 إجابة

line-height = height of icon. (To center the icon)

padding-left equal to width of icon.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.box {
  width: 60px;
  height: 36px;
  background-color: #96ffd1;
}

.box:hover {
  width: 300px;
  -webkit-transition: width 0.5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 0.5s;
}

.box>i {
  position: absolute;
  line-height: 36px;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
}

span {
  height: 36px;
  padding-left: 60px;
  vertical-align: middle;
  position: relative;
  display: none;
}

.box:hover span {
  display: table-cell;
  white-space: nowrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class='box'>
  
  Display when expanded
</div>
</div> </div>
0
وأضاف