Мой внутренний div с позиционированием абсолюта расширяет мой родительский div, а не является отдельным - PullRequest
Новая
       14

Мой внутренний div с позиционированием абсолюта расширяет мой родительский div, а не является отдельным

0 голосов
/ 30 сентября 2018 

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="border-b flex">
   <div class="w-1/6 flex items-center justify-center p-4 border-r text-sm">
      14 hours ago
   </div>
   <div class="w-3/5 p-4 text-sm"><span>
      Dolor aliquid ipsa qui eum in voluptatem Sit non quae illo eveniet exercitation cupiditate veniam sed id animi
      </span>
   </div>
   <div class="w-1/5 flex justify-end items-center p-4 relative">
      <button class="bg-white border rounded px-1 py-1 text-xs"><i class="fa fa-chevron-down"></i></button> 
      <div class="absolute pin-b pin-r bg-white border w-32 items-center justify-center">
         <ul class="list-reset p-2">
            <li>Delete</li>
         </ul>
      </div>
   </div>
</div>

Как видно из моего фрагмента, раскрывающийся список расширяет родительские границы, а не накладывает на них абсолютные значения, как я могу получить их, чтобы мой раскрывающийся список (удалить)не изменит родительские элементы div, а просто наложит их, как показано на следующем рисунке:

enter image description here

1 Ответ

0 голосов
/ 30 сентября 2018

Это происходит потому, что вы установили определенную ширину для каждого из border-b дочерних элементов div с классами w-1/6, w-3/5 (я думаю, это должно быть 4/6 ...),w-1/5 (... и 1/6), поэтому не имеет значения, что у вас есть абсолютный элемент внутри, потому что его родителю по-прежнему назначена определенная ширина, и он всегда будет его использовать. 

.my-list-of-actions {
  top: calc(50% + 15px); /* basicaly it's 50% + half of button height to make it appear just below */
  left: 1rem; /* same as parent's padding */
}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="border-b flex">
   <div class="w-1/6 flex items-center justify-center p-4 border-r text-sm">
      14 hours ago
   </div>
   <div class="w-4/6 p-4 text-sm"><span>
      Dolor aliquid ipsa qui eum in voluptatem Sit non quae illo eveniet exercitation cupiditate veniam sed id animi
      </span>
   </div>
   <div class="w-1/6 flex justify-start items-center p-4 relative">
      <button class="bg-white border rounded px-1 py-1 text-xs"><i class="fa fa-chevron-down">Button</i></button> 
      <div class="my-list-of-actions absolute bg-white border w-32">
      <!-- pin-b makes it stick to parent bottom and you don' want that.
      pin-r is also bad here, as it's supposed to be aligned to the left along with the button.
      Button is aligned vertically in the center so it's best to place the list just below -->
         <ul class="list-reset p-2">
            <li>Delete</li>
            <li>Edit</li>
            <li>Archive</li>
         </ul>
      </div>
   </div>
</div>
...