css 如何在任何媒体大小的div的右上角放置元素标题？

pgpifvop 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(124)

我需要帮助获得标题（h2，h3，h4）区域始终出现在各自的div区域的右上角，无论什么视图正在显示。
此外，标题内容不断溢出，因为我缩小了网页浏览器，我怎么才能阻止它运行？
我试着移动标题的边距和填充，但标题不会向右移动超过350px。
我试着调整div的大小以允许标题移动到右上方。
我应该使用“section元素”而不是div吗？
我还没有尝试使用绝对或相对定位。

/********** Base styles **********/

* {
  font-family: arial, sans-serif, helvetica;
  font-style: normal;
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rebeccapurple;
}

h1 {
  text-align: center;
  font-size: 175%;
  margin-bottom: 40px;
  color: black;
}

h2,
h3,
h4 {
  font-size: 125%;
  text-align: center;
  font-weight: bold;
  border: 1px solid black;
  max-width: 30%;
  margin-bottom: 5px;
  position: relative;
  bottom: 11px;
  left: 231px;
}

h2 {
  background-color: Pink;
  color: black;
}

h3 {
  background-color: red;
  color: white;
}

h4 {
  background-color: greenyellow;
  color: black;
}

div {
  background-color: lightgray;
  padding: 10px 0px 10px 10px;
  border: 1px solid black;
  margin: 0 auto;
  margin-bottom: 10px;
  max-width: 400px;
  position: relative;
}

/*Large devices*/

@media (min-width: 992px) {
  .box1 {
    float: left;
    margin-left: 20px;
    margin-right: 60px;
    max-width: 30%
  }
  .box2 {
    float: left;
    max-width: 30%;
  }
  .box3 {
    float: right;
    max-width: 30%;
    margin-right: 20px;
  }
  h2,
  h3,
  h4 {
    position: relative;
    left: 70.2%;
  }
}

/*Medium devices*/

@media (min-width: 768px) and (max-width:991px) {
  .box1 {
    float: left;
    max-width: 43%;
    margin-bottom: 30px;
    margin-left: 40px;
    margin-right: 0px;
  }
  .box2 {
    float: right;
    max-width: 43%;
    margin-bottom: 30px;
    margin-right: 40px;
  }
  .box3 {
    margin-top: 40px;
    clear: both;
    max-width: 100%;
    margin-left: 40px;
    margin-right: 40px;
  }
  h2,
  h3,
  h4 {
    position: relative;
    left: 70.2%;
  }
}

}

/*small devices*/
@media (max-width:767px) {
  div {
    margin-top: 30px;
  }
  
  h2,
  h3,
  h4 {
    position: relative;
    left: 100%;
  }
}

<!DOCTYPE html>
<html lang="en-CA">

<head>
  <meta charset="utf-8">
  <title> Our Menu </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>Our Menu </h1>

  <div class="box1">
    <h2>Meat</h2>
    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
  </div>

  <div class="box2">
    <h3>Pizza</h3>
    <p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
  </div>

  <div class="box3">
    <h4>Salads</h4>
    <p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
  </div>

</body>

</html>

一个二个一个一个

css

来源：https://stackoverflow.com/questions/75262411/how-can-i-position-an-elements-header-in-the-top-right-corner-of-the-div-at-any

1条答案

按热度按时间

ni65a41a1#

所以，有几件事要回顾一下：
首先，你不需要为相同的层次结构元素使用不同的标题标签，你已经有了第一个标题作为你的标题，因为你没有任何后续的内容，你可以从那里开始使用<h2>。
我们可以使用CSS specificity来定位你的各种标题来改变你喜欢的颜色，你也可以用id，类来做，实际上有几种方法来处理CSS中的任何布局;这正是我为了简单起见而选择的。
float已经非常过时了，已经被flex-box techniques所取代，我们将使用它来定位菜单项上的标题。我们可以使用position属性吗？当然可以。但是如果我们已经在使用flex，我们可以利用它的能力，使用container元素来放置元素，以容纳所有项目，然后使项目本身也利用flex。
我们可以根据需要使用align-self: flex-end;来定位<h2>标记，然后添加一些边距，给予它们远离menuItem的边缘，有一些喘息的空间。
这里可以做的事情还有很多，但我认为这很好地清理了它，您将得到一个更简单、更容易响应的布局，它具有更少的代码和属性。
希望这涵盖了一切。让我知道如果你有任何问题！谢谢你在我的评论后更新你的帖子。确保记住这一点前进;）

/********** Base styles **********/

* {
  font-family: arial, sans-serif, helvetica;
  font-style: normal;
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rebeccapurple;
}

.container {
  display: flex;
  flex-direction: row;
  background: transparent;
  width: 100vw;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}

.menuItem {
  display: flex;
  flex-direction: column;
  background-color: lightgray;
  padding: 0px 0px 10px 10px;
  border: 1px solid black;
  margin: 0 auto;
  flex: 1 1 32%;
  min-width: 400px;
}

h1 {
  text-align: center;
  font-size: 175%;
  margin-bottom: 40px;
  color: black;
}

h2 {
  font-size: 125%;
  text-align: center;
  font-weight: bold;
  border: 1px solid black;
  border-top: 0px;
  border-right: 0px;
  align-self: flex-end;
  padding: 5px 20px;
}

.container .menuItem:nth-child(1) h2 {
  background-color: Pink;
  color: black;
}

.container .menuItem:nth-child(2) h2 {
  background-color: red;
  color: white;
}

.container .menuItem:nth-child(3) h2 {
  background-color: greenyellow;
  color: black;
}

<!DOCTYPE html>
<html lang="en-CA">

<head>
  <meta charset="utf-8">
  <title> Our Menu </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>

<body>

  <h1>Our Menu </h1>
  <div class="container">

    <div class="menuItem">
      <h2>Meat</h2>
      <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
    </div>

    <div class="menuItem">
      <h2>Pizza</h2>
      <p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
    </div>

    <div class="menuItem">
      <h2>Salads</h2>
      <p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
    </div>
  </div>

</body>

</html>

赞(0）回复(0）举报 2023-02-01

我来回答

css 如何在任何媒体大小的div的右上角放置元素标题？

1条答案

相关问题

热门标签

最新问答