如何用CSS正确定位文本？

Question

我不能正确使用“float：right”在它上有没有一个解决方案，将它定位在div的右侧部分，而不使用（左右边距-左边距-右）？

null

html prettyprint-override"><section class="horizontal-timeline" id="timeline" style="background-image: url(https://www.nicepng.com/png/detail/197-1971420_timeline-timeline-png.png) !important;    background-size: cover;">
  <h2 id="timeline-title">là où tout a commencé</h2>
  <div class="events-content">
    <span id="numberCounter" class="1946">1946</span>
    <ol>

      <li class="selected" data-horizontal-timeline='{"date": "16/01/1946"}'>
        <div class=" col-md-6 " style="    height: 100%;">
          <img src="https://i.picsum.photos/id/247/200/300.jpg?hmac=DOAWkFIrJUIvEj0t5qAsGiVgyTn8_e8EicBaXPCQge8">
        </div>
        <div class="desc-slider col-md-6">
          <h3>Post</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

      </li>
    </ol>
  </div>
</section>

null

Answer 1

你能试试这些代码吗？使用flex

null

#timeline-title {
  text-align:center;
}

ol {
  padding:0;
}

.flexible {
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.desc-slider {
  width:50%;
}

html prettyprint-override"><section class="horizontal-timeline" id="timeline" style="background-image: url(https://www.nicepng.com/png/detail/197-1971420_timeline-timeline-png.png) !important;    background-size: cover;">
    <h2 id="timeline-title">là où tout a commencé</h2>
    <div class="events-content">
        <span id="numberCounter" class="1946">1946</span>
        <ol>
            <li class="flexible" class="selected" data-horizontal-timeline='{"date": "16/01/1946"}'>
                <div class=" col-md-6 " style="    height: 100%;">
                    <img src="https://i.picsum.photos/id/247/200/300.jpg?hmac=DOAWkFIrJUIvEj0t5qAsGiVgyTn8_e8EicBaXPCQge8">
                </div>
                <div class="desc-slider col-md-6">
                    <h3>Post</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </li>
        </ol>
    </div>
</section>

Answer 2

使用position:absolute:

position: absolute;
top: 0;
right: 0;

不要忘记父元素需要位置:relative