My goal with applying CSS styles is to create a visually appealing composition of content:
https://i.sstatic.net/CpVXb.pngAfter applying my styles, I received the following result:
https://i.sstatic.net/Bfh5q.jpgli {
position: relative;
list-style-type: none;
border: 1px;
border-color: red;
border-style: solid;
}
div {
border: 1px;
border-color: green;
border-style: solid;
}
div .xx {
display: inline;
width:100%;
}
div .aa {
position: absolute;
dislay: inline;
left: 0;
width:50%;
}
div .bb {
position: absolute;
display: inline;
right: 0;
width:50%;
}
div .cc {
postion: relative;
display: block;
} <li>
<div class="xx">
<div class="aa">A</div>
<div class="bb">B</div>
</div>
<div class="cc">C</div>
</li>As a result, "C" appears below "A" and "B". Can anyone assist me in correcting this issue? Thank you!