什么样的CSS位置最适合下面的任务

我在jinja2（其基本的HTML和CSS）的模板。模板有标题、用户信息、地址和帐户详细信息、交易。大部分内容是固定的，所以我使用了position：absolute并定义了它在页面上的位置。问题出在账户和交易上。什么css position属性我可以用来固定它在页面上的起始点，但是如果它变长了，它不会与底部div重叠？这个模板的最终目的是我想在A4表打印它。因此，它看起来像一个报告，这些内容将从数据库中提取。
下面是我正在尝试的代码：我希望交易框随着帐户div的大小的增加而移动。

<html>
<head>
<style>
div.relative {
  position: relative;
  left: 40px;
  
  border: 3px solid #73AD21;
}
.container {
  position: relative;
   /* set a fixed height to prevent overlap with bottom div */
}
.container1 {
  position: relative;
   /* set a fixed height to prevent overlap with bottom div */
}
/* Then, position the account and transaction sections within the container like this: */

.account {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
   border: 3px solid #73AD21;
}

.transactions {
  position: absolute;
  
  width: 50%;
   border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="container">
  <div class="account">
  This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;
  </div>
  
</div>

<div class="container1">
  <div class="transactions">
  This div element has position: absolute;
  </div>
</div>
</body>
</html>

div.relative {
  position: relative;
  left: 40px;
  
  border: 3px solid #73AD21;
}
.container {
  position: relative;
   /* set a fixed height to prevent overlap with bottom div */
}
.container1 {
  position: relative;
   /* set a fixed height to prevent overlap with bottom div */
}
/* Then, position the account and transaction sections within the container like this: */

.account {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
   border: 3px solid #73AD21;
}

.transactions {
  position: absolute;
  
  width: 50%;
   border: 3px solid #73AD21;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="container">
  <div class="account">
  This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;This div element has position: absolute;
  </div>
  
</div>

<div class="container1">
  <div class="transactions">
  This div element has position: absolute;
  </div>
</div>
</body>
</html>

要固定页面上帐户和交易部分的起始点，但防止它们与底部div重叠，您可以使用位置：相对属性
首先，为account和transaction部分定义一个容器元素，并将其位置设置为relative。然后，使用position在此容器中定位帐户和交易部分：绝对值，但使用top、right、bottom和left属性指定它们相对于容器的位置。
例如，你可以这样定义容器：

.container {
  position: relative;
  height: 300px; /* set a fixed height to prevent overlap with bottom div */
}

/* Then, position the account and transaction sections within the container like this: */

.account {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
}

.transactions {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

/* This will position the account section at the top left of the container, and the transaction section at the top right of the container, each taking up 50% of the width of the container. The height property of the container will prevent overlap with the bottom div if the content in the account and transaction sections becomes too long.

Remember to adjust the widths and positioning of the sections to fit your specific layout needs. */

什么样的CSS位置最适合下面的任务

1条答案

相关问题

热门标签

最新问答