привязка div для адреса электронной почты в контейнере flex

ProgramBox

привязка div для адреса электронной почты в контейнере flex

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

#html #css #flexbox

Вопрос:

Я пытаюсь использовать тег привязки для гиперссылки электронной почты внутри контейнера с помощью flexbox. Вся информация на странице отображается правильно, включая изображение, но электронное письмо располагается в правом верхнем углу экрана. Я читал, что новый тег div в контейнере flexbox может, по сути, начать новый flexbox, что, похоже, и происходит. Может кто-нибудь посоветовать?

 '''

{% extends 'base.html' %}
{% block content %}
{% with messages = get_flashed_messages() %}  
  {% if messages %}  
    {% for message in messages %}  
      <p>{{ message }}</p>  
    {% endfor %}  
  {% endif %}  
{%endwith%}

<h2 style = "text-align: center;">ABOUT</h2>

<style>
div.container {
    align-content: flex-start;
    display: flex;
    justify-content: flex-start;
    flex-wrap: no-wrap; 
  }

  div.anchor{
  position: relative;
 }

div.container img {
  width: 100%;
  height: auto;
  border-right-width: 20px;
  border-right-color: solid rgb(255, 255, 255);
}

img{
  max-width: 100%;
  height: auto;
  border-right: 20px solid rgb(255, 255, 255);
}
 


</style>


<body>


<div class="container">

  <p>
    <a target="_blank" href="static/about.jpg"></a>
      <img src="../static/about.jpg" alt="aboutpic" width="200" height="100">
    </a>
  </p>
blah blah blah</br>
</br>
blah blah blah</br>
</br>
 

blah blah blah </br>
</br>
blah blah blah </br>
</br>
For appointments please contact blah blah blah directly at:</br>
</br>
Phone: blah blah blah</br>
</br>
Email:<div class="anchor"><a href="mailto:blah blah blah@gmail.com"> blah blah blah.com</a>
</div> 
</div>
</body>
{% endblock %}
'''

Ответ №1:

Это то, чего ты хочешь?

добавлено flex-direction: column; в div.container

 div.container {
    align-content: flex-start;
    display: flex;
    justify-content: flex-start;
    flex-wrap: no-wrap; 
    flex-direction: column;
  }

  div.anchor{
  position: relative;
 }

div.container img {
  width: 100%;
  height: auto;
  border-right-width: 20px;
  border-right-color: solid rgb(255, 255, 255);
}

img{
  max-width: 100%;
  height: auto;
  border-right: 20px solid rgb(255, 255, 255);
}

 <h2 style = "text-align: center;">ABOUT</h2>

<body>


<div class="container">

  <p>
    <a target="_blank" href="static/about.jpg"></a>
      <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80" alt="aboutpic" width="200" height="100">
    </a>
  </p>
blah blah blah</br>
</br>
blah blah blah</br>
</br>
 

blah blah blah </br>
</br>
blah blah blah </br>
</br>
For appointments please contact blah blah blah directly at:</br>
</br>
Phone: blah blah blah</br>
</br>
Email:<div class="anchor"><a href="mailto:blah blah blah@gmail.com"> blah blah blah@gmail.com</a>
</div> 
</div>
</body>

Кроме того, ваш HTML немного не в порядке, старайтесь избегать
тегов и используйте границу на css для визуализации макета

 div.container {
    align-content: flex-start;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

.container img {
  width: 100%;
  height: auto;
  border-right: 5px solid cyan;
}

img{
  max-width: 100%;
  height: auto;
  border-right: 20px solid rgb(255, 255, 255);
}
p {
border: 2px solid red;
}
.email {
border: 2px solid lime;
}
}

 <h2 style = "text-align: center;">ABOUT</h2>

<body>


<div class="container">
    <a target="_blank" href="static/about.jpg"></a>
      <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80" alt="aboutpic" width="200" height="100">
  </a>
  <p>blah blah blah</p>
  <p>blah blah blah</p>

  <p>blah blah blah</p>

  <p>blah blah blah</p>
  <p>
  For appointments please contact blah blah blah directly at:
  </p>
  <p>Phone: blah blah blah</p>
  <div class="email">
  Email:<a href="mailto:blah blah blah@gmail.com"> blah blah blah@gmail.com</a>
  </div>
</div>
</body>

Я бы также посоветовал вам прочитать или посмотреть 100-секундное видео о flex, это действительно хорошее https://www.youtube.com/watch?v=K74l26pE4YA

1. Прежде всего, спасибо, что уделили этому время, но, к сожалению, это не совсем то, что я ищу. Изначально у меня было изображение слева от большей части моего контента, оно было чрезвычайно большим, поэтому даже после обновления максимальной ширины до 25% изображение все еще находится над моим основным контентом. Мне нравится макет со строкой с гибким направлением, но это приведет к смещению гиперссылки электронной почты. Также интересно, что теперь электронное письмо находится под текстом «Email:», а не справа от него.

2. @White_Homme попробуйте использовать flex 1 и обернуть все теги P в один div, это позволит равномерно распределить пространство между разделами

Метки: привязка div для адреса электронной почты в контейнере flex