Мне нужно сделать так, чтобы ссылка A, B шла внутрь к левому элементу (зеленое поле), а ссылка C, D - внутрь к правому элементу (желтое поле), обернутая контейнером. Как показано на рисунке, мне также удалось разместить Link C, D на правой стороне, используя CSS position: absolute; right: 0;, но когда я использую position: absolute; left: 0; для Link A, B, эта ссылка не на выравнивание по левому краю к верхним элементам
Изображение
это мой код:
<head>
<style>
.container {
width: 1000px;
border: 3px solid black;
margin: auto;
padding: 16px;
}
.left, .right { width: 400px; }
.left {
background-color: #197b30;
float: left;
color: white;
font-style: italic;
text-align: left;
position: relative;
}
.left span {
font-weight: bold;
font-size: large;
font-style: normal;
text-decoration-line: underline;
}
.left ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
left: 0;
}
.left a { color: #ff0000}
.right a { color: #ff0000}
.right {
background-color: #fff200;
float: right;
color: black;
font-style: italic;
text-align: right;
position: relative;
}
.right span {
font-weight: bold;
font-size: large;
font-style: normal;
text-decoration-line: underline;
}
.right ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
right: 0;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p><span>This is a left paragraph</span</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel, aperiam odit
nostrum,
reprehenderit temporibus reiciendis aliquam maxime sunt qui quos eligendi sequi unde,
quas molestiae explicabo quod harum veniam alias.</p>
<p><span>This is a left link</span></p>
<ul>
<li><a href="#">Left Link A</a></li>
<li><a href="#">Left Link B</a></li>
</ul>
</div>
<div class="right">
<p><span>This is a right paragraph</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi incidunt
necessitatibus adipisci eum harum, culpa, amet voluptate cumque molestias quos
earum
asperiores hic debitis iure iste porro? Fugit, itaque quo.</p>
<p><span>This is a right link</span></p>
<ul>
<li><a href="#">Right Link C</a></li>
<li><a href="#">Right Link D</a></li>
</ul>
</div>
<div class="clear"></div>
</div>