如何将两个元素相邻放置 [英] How to position two elements next to each other

问题描述

我正在使用 Thymeleaf 呈现 HTML 页面.我有用户名显示在右上角的屏幕上.我想添加一个链接，如果用户尚未验证他的电子邮件，我会显示该链接.我试图使链接出现在括号中的用户名之后.这是 HTML 的这一部分

<div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">你的名字</div><div th:if="${!user.isEmailValidated()}" class="div-block-13"><div class="email_confirmed"><a th:href="@{'/email/send/' + ${user.getToken()}}">您的电子邮件未被确认！</a>

用户名的CSS

.div-block-10 {位置:绝对；显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox;显示:弹性；边距:98px 27px 0px 自动；文本对齐:左；}

学完 CSS 教程后，我有了基本的知识，但似乎我不了解显示属性.我想以这种方式为用户保留 CSS，链接的 CSS 是

.div-block-13{位置:绝对；边距:98px 自动 0px 自动；文本对齐:右；}

我的逻辑是我希望它在页面的相同高度上，所以我保持 98px 和 0px也将其在右侧对齐，因此如果用户名较长而无法在左侧移动并且链接保持固定在右侧.还尝试了所有位置属性，但我的链接未正确显示 - 超出屏幕或不是't 在同一高度

解决方案

.div-block-10 {显示:弹性；对齐项目:居中；高度:100%；边距:98px 0 0；文本对齐:左；对齐内容:中心；}

<div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">你的名字</div><div th:if="${!user.isEmailValidated()}" class="div-block-13"><div class="email_confirmed"><a th:href="@{'/email/send/' + ${user.getToken()}}">您的电子邮件未被确认！</a>

这就是你要找的

我刚刚使用了 flex 属性， justify-content: center;属性将使您的子 div 水平居中对齐，而 align-content:center 将使您的 div 在父 div 的垂直中心对齐，并且彼此相邻.如果您希望 div 之间有一些间隙，只需在 div 上提供填充或边距.如果您需要任何帮助，请告诉我.

I am rendering HTML page with Thymeleaf. I have user names which I display on top right screen. I want to add a link which I display if user hasn't validated his email. I am trying to make the link appear after the user name in brackets. Here is this part of the HTML

<div th:if="${isLogged}" class="div-block-10">
    <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
    <div th:if="${!user.isEmailValidated()}" class="div-block-13">
        <div class="email_confirmed">
            <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>
        </div>
    </div>

The CSS for user name

.div-block-10 {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 98px 27px 0px auto;
    text-align: left;
}

After finishing CSS tutorials I have basic knowledge and it seems I don't understand the display properties. I want to keep CSS for user this way and the CSS for the link is

.div-block-13{
    position: absolute;
    margin: 98px auto 0px auto;
    text-align: right;
}

My logic is that I want it on same height of page so I kept 98px and 0px also to align it on the right so if the user name is longer to move on the left and the link to stay fixed to the right.Also tried all position properties and my link isn't showing properly - goes out of screen or isn't on the same height

解决方案

.div-block-10 {
  display: flex;
  align-items:center;
  height:100%;
  margin: 98px 0 0;
  text-align: left;
  justify-content:center;
}

<div th:if="${isLogged}" class="div-block-10">
            <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
            <div th:if="${!user.isEmailValidated()}" class="div-block-13">
                <div class="email_confirmed">
                    <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>
                </div>
            </div>

is this what you are looking for

I just used the flex properties, justify-content: center; property will align your child divs horizontally center and align-content:center will align your divs in vertically center of the parent div and will come next to each other. if you want some gap between your divs simply give the padding or margin on divs. Let me know if you need any help on this.

这篇关于如何将两个元素相邻放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！