英文:
What CSS position will best suit the following task
问题
我正在使用jinja2制作模板（基本的HTML和CSS）。模板包含标题、用户信息、地址和账户详细信息、交易等部分。大部分内容是固定的，所以我使用了position:absolute并定义了它在页面上的位置。问题出现在账户和交易部分。我可以使用哪种CSS位置属性来固定它在页面上的起始点，但如果它变得很长，它不会重叠到底部的div？这个模板的最终目的是要打印在A4纸上。因此，它看起来像一份报告，这些内容将从数据库中获取。
这是我正在尝试的代码：我希望交易框随着账户div的大小增加而移动。
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 40px;
border: 3px solid #73AD21;
}
.container {
position: relative;
/* 设置固定高度以防止与底部div重叠 */
}
.container1 {
position: relative;
/* 设置固定高度以防止与底部div重叠 */
}
/* 然后，像这样在容器内定位账户和交易部分： */
.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">
这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；这个div元素具有position：absolute；
</div>
</div>
<div class="container1">
<div class="transactions">
这个div元素具有position：absolute；
</div>
</div>
</body>
</html>
希望这有助于解决您的问题。如果您有任何其他疑问，请随时提出。
英文:
I am making a template in jinja2(Its basic HTML and CSS). The template has Header, User info, Address and Account details, transactions. Most of the content is fixed so i have used position:absolute and defined its position on the page. The problem is with account and transactions. What css position property can I use to fix its starting point on the page but if it becomes long it does not overlap the bottom div ? The final purpose of this template is I want to print it in A4 sheet. So it looks like a report and the contents of these will be fetched from database.
Here is the code that I am experimenting with: I want the transactions box to move as the size of the account div is increasing.
<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>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
要修复页面上帐户和交易部分的起始点，但防止它们与底部的div重叠，您可以使用position: relative属性。
首先，为帐户和交易部分定义一个容器元素，并将其位置设置为relative。然后，使用position: absolute将帐户和交易部分定位在此容器内，但使用top、right、bottom和left属性相对于容器指定它们的位置。
例如，您可以像这样定义容器：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
position: relative;
height: 300px; /* 设置固定高度以防止与底部div重叠 */
}
/* 然后，将帐户和交易部分定位在容器内，如下所示： */
.account {
position: absolute;
top: 0;
left: 0;
width: 50%;
}
.transactions {
position: absolute;
top: 0;
right: 0;
width: 50%;
}
/* 这将使帐户部分位于容器的左上角，交易部分位于容器的右上角，每个部分占容器宽度的50%。如果帐户和交易部分的内容过长，容器的高度属性将防止与底部div重叠。
请记得根据您的具体布局需求调整部分的宽度和定位。 */
<!-- end snippet -->
这是您所需的翻译。
英文:
To fix the starting point of the account and transaction sections on the page but prevent them from overlapping the bottom div, you can use the position: relative property.
First, define a container element for the account and transaction sections, and set its position to relative. Then, position the account and transaction sections within this container using position: absolute, but specify their positions relative to the container using the top, right, bottom, and left properties.
For example, you could define the container like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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. */
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论