Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы каждая коробка не перекрывала ту, что справа от нее?

Как мне сделать так, чтобы каждая коробка не перекрывала ту, что справа от нее?

#css #reactjs #flexbox

Вопрос:

к вашему сведению, css — react очень похож на обычный css

каждый отдельный код коробки

   export const CardWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  flex-direction: column;
  background: ${(props) => props.theme.colors.backgrounds.project};
  padding-bottom: 28px;
  padding-right: 0px;
  height: 300px;
  width: 375px;
`;

каждая коробка должна выглядеть так
введите описание изображения здесь

но когда я увеличиваю ширину, в этом изображении ниже должны быть черные линии, чтобы отделить каждое поле введите описание изображения здесь

   export const DeploymentsWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, 335px);
  grid-gap: 20px 30px;
  max-height: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 30px 30px 30px;
`;

введите описание изображения здесь

Ответ №1:

Установите max-width для своих карт, чтобы 100%

Комментарии:

1. да! это сработало, однако, у меня есть последний вопрос: как сделать поле больше, чтобы текст не перекрывал поле? imgur.com/a/0no6mMg

2. Два варианта.. либо установите overflow:scroll для вашей карты, либо установите word-break:break-all на элементе, который содержит этот текст внутри.

Метки: , ,