這個專案是用 Angular 和 Tailwind CSS 完成的。
問題：我的 div 沒有占用所有可用空間。每個“a”都是一個藍色背景色的 div。空白是我想擺脫的空白
我的代碼：這是我的主 html 檔案的簡化內容
<div class="container !mx-0 flex flex-row justify-between">
<app-photo-card
*ngFor="let photo_card of photo_cards"
[photo_card]="photo_card"
[class]="'w-full'"
></app-photo-card>
</div>
主 ts 檔案的簡化內容
photo_cards = [
{
title: 'a',
content: "",
img_src: '',
},
];
這是我的照片卡組件 html 檔案的內容
<div class="w-full">
<div class="w-full bg-blue-500">a</div>
</div>
使用 vanilla html 和 css 嘗試了此代碼的類似版本，它似乎按預期作業。真的不確定我在這里做錯了什么。
預期的輸出將是 4 個 'a' div，藍色背景橫跨整個螢屏，這將導致沒有空白。
uj5u.com熱心網友回復：
如果您使用的是 flexbox，請使用 classflex-grow而不是w-full. 這是一個示例檢查here
<div class="container flex flex-row justify-around">
<div class="flex-grow">
<div class="w-full bg-red-500 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-red-400 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-red-300 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-red-200 text-center">a</div>
</div>
</div>
uj5u.com熱心網友回復：
Angular 的組件已隱式設定display: inline為它，這意味著該組件將占用與其內容一樣多的空間。這就是為其設定寬度的原因，沒有任何效果。嘗試設定display: inline-block您的app-photo-card組件（從父組件或組件本身使用host選擇器。
uj5u.com熱心網友回復：
在我看來，這是一個更簡單的解決方案，同時仍然使用 flexbox。我通過向flex-grow組件添加類而不是w-full.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="container flex flex-row justify-around bg-gray-300">
<div class="flex-grow">
<div class="w-full bg-blue-500 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-blue-400 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-blue-300 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-blue-200 text-center">a</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/529959.html
上一篇：ReduxSaga：'string'型別的引數不可分配給'TakeableChannel<unknown>'型別的引數