Блог

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

Как перенести изображение справа от карточки

#css #reactjs

Вопрос:

У меня есть визитная карточка.

Я хочу перенести изображение на карточке в правую часть карточки , и оно также должно совпадать с именем Pankaj Rout и должно быть отзывчивым.

Это то, что я пробовал до сих пор,

 var userMap = [
  {name: "Pankaj Rout", email: "pankaj.rout@somedomain.com"}
]

userData.map((data) => {
      return (
        <div key={data.email}>
          <Card style={cardStyle}>
            <Card.Body>
              <div class="col-sm-6 text-right">
                <img
                  className={classes.img}
                  style={cardImgStyle}
                  src="https://www.w3schools.com/howto/img_avatar.png"
                  alt="sans"
                />
              </div>
              <Card.Title> {data.name} </Card.Title>
              <Card.Subtitle className="mb-2 text-muted">
                General Manager
              </Card.Subtitle>
              <Card.Text> {data.email} </Card.Text>
                <Button> Delete </Button>
                <Button> Email </Button>
                <Button> Chat </Button>
            </Card.Body>
          </Card>
        </div>
      );

classes используется с withStyles крючка

 const useStyles = (theme) => ({
  img: {
    justifyContent: 'right',
  }
});

следующий стиль относится к cardImgStyle 

 const cardImgStyle = {
  width: "30%",
  height: "30%",
  borderRadius: "50%",
  display: "flex",
  flexWrap: "wrap",
};

Не мог бы кто-нибудь, пожалуйста, указать, что здесь не так?

Спасибо!!

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

1. Любопытно, где вы нашли «выровнять»: «правильно»,` стиль»? :O . В любом случае. Измените структуру html. Имейте name и img храните их в одном контейнере ( в этом порядке ) и используйте flexbox, чтобы выровнять их

2. Привет @MihaiT, спасибо за быстрый ответ. Позвольте мне попробовать это

3. Не могли бы вы, пожалуйста, написать рабочий css для этого подразделения, где будут присутствовать как img, так и имя

4. ну, пожалуйста, сначала попробуйте. Просто измените HTML, как я сказал в своем предыдущем комментарии. Тогда просто установите флажок flexbox. ( я вижу, вы используете flex в своем коде. ). Попробуй это. Это не повредит 🙂

Ответ №1:

Оправдание недовольства : «космический жук» ;

или

для img : float :» правильно»;

Метки: