html - 我放置了两个带有文本的 div，然后一个带有照片，最后一个带有更多文本。但似乎照片所占据的位置被忽略了？

问题描述

我有问题。因为我确信这只是我错过了一些重要的点，所以我没有做出详细的解释，但只是经历了我实际所做的：

我在 div 中写了一些文本。
然后我在另一个 div 中写一些其他大小的文本。
然后我写一个图像，也在一个div中。我将宽度设置为 100%，不设置高度，这意味着我将获得尽可能大的图片，但仍保持关系。
然后我最后又写了一些第三种尺寸的文字。
我现在决定在最后一个 div 的右侧需要一个按钮。我将它放置在一个流中，它似乎可以工作，只是垂直设置有点偏离。
然后我决定将按钮放在 div 的垂直中间，使用这种方法：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_center-vertical
但是现在按钮根本没有放在中间。相反，它们被放置得更高。

我摆弄了一下，这就是我发现的：

我给每个 div 和照片一个边距，以及不同的背景颜色，照片为红色，最后一个 div 为粉红色。如您所见，浏览器会忽略带有照片的 div，而是在第二个 div 停止的地方开始其 div。据我了解，这不符合元素的正常放置。我在放置带有按钮的最后一个 div 之前放置了照片，那么为什么最后一个 div 在照片之前开始呢？我错过了什么，我该如何解决？

希望有人有答案

此致

波尔

标签： htmlcss

后期添加：问题似乎解决了。我试着做一个简单的例子，当我做完之后，很容易找到有问题的 css 和/或代码。斜体线从工作样本中删除，整个类 retFoto 也是如此。所以现在它可以工作了，但我仍然不明白为什么。

这是一个更严格的演示：

我的问题是：由于我将不同的 ' 放置如下：

echo "<div class='retten'>";
echo "<div class='rettensNavn'>A name</div>";

echo "<div class='retbeskrivelse'> A text </div>";

echo "<div class='retFoto'>";
echo "  <img class='foto' src='1/1.png' alt='Some name'>";
echo "</div>";    

echo "<div class='Pris'>" . "Pris: 175,50 kr";
echo   "<button class='BestilKnap'>Bestil</button>";
echo "</div>";
echo "</div>";

Pris-div 不应该在图片（红色）之后启动吗？

据我了解，HTML 和/或 php 脚本始终保持打印位置，当您放置另一个元素（并删除节点或其他内容）时，该位置会移动。如果这是真的，Pris-div 不应该在图片之后启动吗？

这是完整的代码和 css：

<!DOCTYPE html>

<html>
  <head>
    <link href="editerbare.css?v=<?php echo time(); ?>" rel="stylesheet" type="text/css" />
  </head>

  <body>
  <?php
    echo "<div class='retten'>";

    echo "<div class='rettensNavn'>A name</div>";

    echo "<div class='retbeskrivelse'> A text </div>";

    echo "<div class='retFoto'>";
    echo "  <img class='foto' src='1/1.png' alt='Some name'>";
    echo "</div>";    

    echo "<div class='Pris'>" . "Pris: 175,50 kr";
    echo   "<button class='BestilKnap'>Bestil</button>";
    echo "</div>";    

    echo "</div>";    
  ?>
  </body>
</html>

和CSS

.RestaurantOverskrift {
  font-family: Bahnschrift Semilight; /*Calibri;*/
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;

  font-size: 32px;
  font-weight: bold;
}

.RestaurantAdresse {
  margin-left: 20px;
}

.GruppeOverskrift {
  font-family: Calibri;
  font-size: 32px;
  font-weight: bold;
  margin: 20px;
}

.retten {
  margin-left: 10px;
  margin-top: 10px;
  padding: 10px;
  padding-bottom: 5px;
  border: 1px solid gray;
  border-radius: 3px;
}

.rettensNavn {
  font-family: Calibri;
  font-size: 24px;
  font-weight: normal;
  width: 100%;
}

.retbeskrivelse {
  font-family: Calibri;
  font-size: 14px;
  font-weight: normal;
}

img.foto {
  float: left;
  width: 100%;
  margin: 10px;
}

.retFoto {
  height: 100%;
  margin: 10px;
  background-color: red;
}

.Pris {
  font-size: 18px;
  font-weight: normal;
  background-color: lightgreen;
}

.BestilKnap {
  font-size: 14px;
  font-weight: normal;
  padding-left: 5px;
  padding-right: 5px;
  float: right;
  margin: 0;
}

html - 我放置了两个带有文本的 div，然后一个带有照片，最后一个带有更多文本。但似乎照片所占据的位置被忽略了？

问题描述

解决方案

推荐阅读