logo标签列表

元素定位 HTML/CSS

htmlcss
3

这是我制作的第一个网页：

https://karmah24.github.io/Coursera/mod2_sol/

在每个部分中，披萨、汉堡和饮料的标题应该在该部分的右上方。我已经为每一列分配了相对位置，并将标题设为绝对位置。但这样会使它们脱离正常文档流，当我用不同的宽度查看页面时，lorem epsum内容会根据不同尺寸而向上移动。

我该如何纠正这个问题？为什么段落标签中的内容在所有尺寸下都要向上移动，因为标题被从文档流中取出？

另外，我该如何居中整个图像+标题？

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: azure;
}
* {
    box-sizing: border-box;
}
h1 {
    text-align: center;
}
.row {
    width: 100%;
}
.title1, .title2, .title3 {
    padding: 1%;
    margin-left: 1%;
    margin-bottom: 1%;
    border-left: 4px solid black;
    border-bottom: 4px solid black;
    position: absolute;
    top: 0%;
    right: 0%;
}
.title1 {
    background-color: rgb(223, 209, 25);
}
.title2 {
    background-color: rgb(132, 214, 24);
}
.title3 {
    background-color: aqua;
}

@media (min-width: 992px) {
    .col_lg_4 {
        position: relative;
        float: left;
        width: 31.33%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    } 
}
@media (min-width: 768px) and (max-width: 994px) {
    .col_md_6 {
        position: relative;
        float: left;
        width: 48%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    }
    .col_md_12 {
        position: relative;
        float: left;
        width: 98%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    } 
}
@media (max-width: 767px) {
    .col_sm_12 {
        position: relative;
        float: left;
        width: 98%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    } 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MENU</title>
    <link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <div class="row">
        <section class="col_lg_4 col_md_6 col_sm_12">
            <header class="title1">PIZZAS</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
                <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
            </p>
            <figure>
                <img src="pizza.jpg" alt="pizza" width="50%" height="50%">
                <figcaption>Try our latest Supreme Pizza</figcaption>
            </figure>
        </section>
        <section class="col_lg_4 col_md_6 col_sm_12">
            <header class="title2">BURGERS</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
                <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
            </p>
            <figure>
                <img src="burger.jpg" alt="burger" width="50%" height="50%">
                <figcaption>Try our latest Supreme Burger</figcaption>
            </figure>
        </section>
        <section class="col_lg_4 col_md_12 col_sm_12">
            <header class="title3">BEVERAGES</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
                <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
            </p>
            <figure>
                <img src="beverages.jpg" alt="beverages" width="50%" height="50%">
                <figcaption>Try our Latest Chillers</figcaption>
            </figure>
        </section>
    </div>
</body>
</html>

3个回答
2

  1. 你可以使用float: right代替position: absolute;，这样段落中的文本将围绕您的标题浮动。

  2. 为段落设置margin和padding。不同的浏览器默认值不同。

  3. 不要在img中使用width="50%" height="50%"，它们已过时。请在CSS中设置。

  4. 使用text-align: center;在section figure中设置内容居中。

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: azure;
}

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

.row {
  width: 100%;
}

.title1,
.title2,
.title3 {
  padding: 1%;
  margin-left: 1%;
  margin-bottom: 1%;
  border-left: 4px solid black;
  border-bottom: 4px solid black;
  float: right;
}

.title1 {
  background-color: rgb(223, 209, 25);
}

.title2 {
  background-color: rgb(132, 214, 24);
}

.title3 {
  background-color: aqua;
}

section p {
  padding: 1%;
  margin: 0;
}

section figure {
  padding: 1%;
  margin: 0;
  text-align: center;
}

section img {
  width: 50%;
  height: auto;
}

@media (min-width: 992px) {
  .col_lg_4 {
    position: relative;
    float: left;
    width: 31.33%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
}

@media (min-width: 768px) and (max-width: 994px) {
  .col_md_6 {
    position: relative;
    float: left;
    width: 48%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
  .col_md_12 {
    position: relative;
    float: left;
    width: 98%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
}

@media (max-width: 767px) {
  .col_sm_12 {
    position: relative;
    float: left;
    width: 98%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MENU</title>
  <link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div class="row">
    <section class="col_lg_4 col_md_6 col_sm_12">
      <header class="title1">PIZZAS</header>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
        <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
      </p>
      <figure>
        <img src="pizza.jpg" alt="pizza">
        <figcaption>Try our latest Supreme Pizza</figcaption>
      </figure>
    </section>
    <section class="col_lg_4 col_md_6 col_sm_12">
      <header class="title2">BURGERS</header>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
        <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
      </p>
      <figure>
        <img src="burger.jpg" alt="burger">
        <figcaption>Try our latest Supreme Burger</figcaption>
      </figure>
    </section>
    <section class="col_lg_4 col_md_12 col_sm_12">
      <header class="title3">BEVERAGES</header>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
        <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
      </p>
      <figure>
        <img src="beverages.jpg" alt="beverages">
        <figcaption>Try our Latest Chillers</figcaption>
      </figure>
    </section>
  </div>
</body>

</html>

非常感谢。那么没有使用定位实现这个的方法吗？ - Karmah24
1
在这种特定情况下，标题的浮动只能通过使用“float”规则来实现。将“absolute”定位在“relative”内是一个好工具，但不适用于此情况。 - focus.style
嘿，只有一件事情，即使在 CSS 中使用了宽度和高度属性设置图片，如果我给出错误的路径，也没有为图片留下空间。这个特性也过时了吗？ - Karmah24
1
对于空格，您应该以像素为单位设置严格的大小，但是猜测每个图像的大小将成为一个问题，因为适应性存在一些问题。我不建议这样做。当图像路径不正确时，这是非常罕见的情况，请尽量避免。 - focus.style
1

是的，你应该使用CSS flex模块或Bootstrap 4，这样可以轻松实现。 在当前代码中，您应该使用px而不是%，列顶部填充应与按钮高度相似。

1

首先，position: absolute会将元素移出文档流，这意味着该元素所占据的空间将被移除，因此其他元素会稍微上移。

因此，一种在右上角设置标题并仍然占用空间的方法是：

我将为父元素（section）设置以下内容：

display: flex;
flex-direction: column;

对于标题，删除 position 和 top / left 属性，并添加以下内容：

margin-left: auto;

当你将margin-*direction*: auto设置时，它会将元素移动到相反的方向。 Css flex module是创建布局的好方法。尝试学习它，它会让事情变得更容易。来源
嘿，感谢你的帮助。我肯定会查找Flex模块，但现在我正在学习的课程只教了定位和浮动，并且这是课程的作业，所以一定有一种使用相对/绝对定位实现相同效果的方法。你能帮我吗？ - Karmah24
那么更确切地说，您希望标题位于右侧并仍占用空间吗？ - user11910832
是的，确切地说，标题下面不应该有任何内容。 - Karmah24
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接