Сложность в разработке визитной карточки с использованием CSS

ProgramBox

Сложность в разработке визитной карточки с использованием CSS

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#html #css #responsive-design #flexbox

#HTML #css — код #адаптивный дизайн #гибкий ящик

Вопрос:

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

Вот мой следующий код

 .business-card{
   position:relative;
   border:1px solid black;
  width:200px;
}
.business-card section {
  display:flex;
  flex-flow:column;
  align-items:center;
}


.email{
  position:absolute;
  right:0;
}

 <div class="business-card">
  <section>
      <span>
          name:abc
    </span>
    <span>
        title:xyz
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       abc@abc.com
   </span>
  </footer>
</div>

Я пытаюсь обернуть имя / заголовок, но он выходит за пределы div.

 .business-card{
   position:relative;
   border:1px solid black;
  width:200px;
}
.business-card section {
  display:flex;
  flex-flow:column;
  align-items:center;
  
}


.email{
  position:absolute;
  right:0;
}

 <div class="business-card">
  <section>
      <span>
          name:abcsfsdfjsdflkjsdjflssfsdfds
    </span>
    <span>
        title:xyz
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       abc@abc.com
   </span>
  </footer>
</div>

Может ли кто-нибудь, пожалуйста, помочь в этом PS: Прилагается образец скриншота визитной карточки, которую я хочу разработать

Ответ №1:

 .card {
  border: 1px solid lightgray;
}
.title {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
.title > div {
  width: 50%;
}
.info {
  display: flex;
  padding: 2em;
}
.info > div {
  flex: 1;
}
.info > div:nth-child(2) {
  text-align: right;
}

 <div class="card">
  <div class="title">
    <div>Name: eDesignary</div>
    <div>Title: Source code platform!</div>
  </div>
  <div class="info">
    <div>Hyderabad</div>
    <div>edesignary@gmail.com</div>
  </div>
</div>

Пожалуйста, дайте мне знать, если ваша проблема будет решена.

1. .. Я ищу что-то именно это, но даже с вашим кодом, если я попытаюсь добавить дополнительный текст в раздел текстового имени и заголовка, он выходит из div, вместо этого я хочу, чтобы он был завернут в div … пожалуйста, помогите

2. Спасибо за ответ … теперь он работает правильно. Другой вопрос, я попытался придать ширину заголовку (на данный момент он занимает всю ширину), он принимает ширину, но содержимое, похоже, не находится в центре

Ответ №2:

Получить codepen.io учетная запись> найдите «визитная карточка», а затем создайте что-то похожее на основе пера другого человека. Таким образом вы можете узнать о других методах, о которых обычно не знаете.

Что касается этого, я бы, вероятно, сделал DIV размером что-то вроде 500 пикселей

Изображение займет 50% высоты div, а затем соответствующим образом отформатирует ваш текст

1. Вот моя ссылка на codepen для визитной карточки codepen.io/sahithiK/pen/bwWKyr…any помощь была бы очень признательна

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

Ответ №3:

Когда мы вводим имена, мы ставим пробелы между именем, отчеством и фамилией. Предполагая, что ни один из них не является очень длинным, мы можем заставить ваш код работать, просто заменив ‘align-items’ на ‘text-align’.

HTML:

  <div class="business-card">
  <section>
    <span>
          name:abcsfs dfjsd     flkjsdj flssfsdfds
    </span>
    <span>
        title:xyz xyz xyz xyz xy xyz xyz xyz xyz
    </span>
  </section>
  <footer>
    <span class="phone">
       123-123-123
   </span>
    <span class="email">
       abc@abc.com
   </span>
  </footer>
</div>

CSS — код:

  .business-card {
  position: relative;
  border: 1px solid black;
  width: 200px;
}

.business-card section {
  display: flex;
  flex-flow: column;
  text-align: center;
}

.email {
  position: absolute;
  right: 0;
}

Пожалуйста, дайте мне знать, если это решит вашу проблему.

1. Спасибо за ответ, но это не перенос текста, как ожидалось

2. Проверьте эти 2 ссылки: JSFiddle и CSSTRICKS — многострочный текст, выровненный по вертикали

3. Спасибо за ссылки

Ответ №4:

Проверьте приведенный ниже фрагмент… дайте мне знать

 .business-card{
   position:relative;
   border:1px solid black;
  width:800px;
  height: 400px;
}
.business-card section {
  display:flex; 
  flex-flow:column;
  align-items:center;
}
.email{
  position:absolute;
  right:0;
}

#textbox p{
  display: inline-block;
  width:31%!important;
  vertical-align:top;
  text-align:left;
  padding:0px 5px;
}

 <div class="business-card">
  
  <section>
      <span>
          <img style="height: 200px; width: 400px; align-items:center;" src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png"/>
    </span>
  </section>
  
  <div id="textbox">
  
  <p>Text on the left.Text on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the left</p>
    <p>Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.</p>
  <p>Text on the right.</p>
  </div>
  <br>
  <br>
  
  <div style="clear: both;"></div><!-- Fixes float issues -->
  
</div>

Метки: Сложность в разработке визитной карточки с использованием CSS