时间戳

首页 > 解决方案 > flex 容器中电子邮件地址的锚 div

html - flex 容器中电子邮件地址的锚 div

问题描述

我正在尝试使用 flexbox 将锚标记用于容器内的电子邮件超链接。页面上的所有信息（包括图像）都正确显示，但电子邮件本身位于屏幕的右上角。我读到 flexbox 容器中的新 div 标签基本上可以开始一个新的 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 %}
'''

标签： htmlcssflexbox

解决方案

这是你想要的吗？

添加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%3D&ixlib=rb-1.2.1&w=1000&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%3D&ixlib=rb-1.2.1&w=1000&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>

我还建议您阅读或观看有关 flex 的 100 秒视频，这个视频真的很棒https://www.youtube.com/watch?v=K74l26pE4YA

推荐阅读