html - 如何将特定的 div 元素向右移动

问题描述

这是jsfiddle。我需要将通知 div 移动到右上角。如何实现这一点？我尝试了浮动正确但无法正常工作

请试试这个

.notice {
  display: block;
  position: static;
  float: right;
  border-radius: 6px;
  font-size: 1.2rem;
  padding: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 1rem;
  background-color: green;
  color: hsla(0, 0%, 0%, 1);
  color: var(--text);
  transition: height .5s ease-in, opacity .5s ease-in;
  word-wrap: break-word;
  word-break: break-word;
}

<div class="notice   is-success x-hidden-focus">
  <p class="alert-title">
    <span class="docon docon-lightbulb" aria-hidden="true">…&lt;/span> Tip

  </p>
  <p>
    Using conventional routing with the default route allows you to build the application quickly without having to come up with a new URL pattern for each action you define. For an application with CRUD style actions, having consistency for the URLs across
    your controllers can help simplify your code and make your UI more predictable.
  </p>
</div>

标签： htmlcss

body {
    background-color: #2e2e2e
}
.container {
    float: right;
    width: 200px;
    position: absolute;
    right: 0;
}
p {
    color:white
}
.alert {
    display: block;
    position: relative;
    border-radius: 6px;
    font-size: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    background-color:green;
    color: hsla(0,0%,0%,1);
    color: var(--text);
    transition: height .5s ease-in, opacity .5s ease-in;
    word-wrap: break-word;
    word-break: break-word;
   
}
.notice {
    display: block;
    position: static;
    float:right;
    border-radius: 6px;
    font-size: 1.2rem;
    padding: 1rem;
    font-family:Arial, Helvetica, sans-serif;
    margin-top: 1rem;
    background-color: green;
    color: hsla(0,0%,0%,1);
    color: var(--text);
    transition: height .5s ease-in, opacity .5s ease-in;
    word-wrap: break-word;
    word-break: break-word;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Custom.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="well">
                    <form>
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control" placeholder="First Name" />
                        </div>
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control" placeholder="last name" />
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" name="email" class="form-control" placeholder="email" />
                        </div>
                        <div class="form-group">
                            <input type="button" class="btn btn-danger" value="Register" />
                        </div>
                    </form>
                </div>
                <div class="alert is-success x-hidden-focus">
                    <p class="alert-title">
                        <span class="docon docon-lightbulb" aria-hidden="true">…&lt;/span>
                        Tip

                    </p>
                    <p>
                        Using conventional routing with the default route allows you to build the application quickly without having to come up with a new URL pattern for each action you define. For an application with CRUD style actions, having consistency for the URLs across your controllers can help simplify your code and make your UI more predictable.
                    </p>
                </div>
                <div class="notice   is-success x-hidden-focus">
                    <p class="alert-title">
                        <span class="docon docon-lightbulb" aria-hidden="true">…&lt;/span>
                        Tip

                    </p>
                    <p>
                        Using conventional routing with the default route allows you to build the application quickly without having to come up with a new URL pattern for each action you define. For an application with CRUD style actions, having consistency for the URLs across your controllers can help simplify your code and make your UI more predictable.
                    </p>
                </div>


            </div>
        </div>

    </div>
</body>
</html>

html - 如何将特定的 div 元素向右移动

问题描述

解决方案

推荐阅读