이 스팬을 디브의 오른쪽에 맞추는 방법은 무엇입니까?

이 스팬을 디브의 오른쪽에 맞추는 방법은 무엇입니까?

HTML은 다음과 같습니다.

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

이 CSS로:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

jsFiddle을 선택한 경우: http://jsfiddle.net/8JwhZ/

이름과 날짜가 서로 붙어 있는 것을 볼 수 있습니다.날짜를 오른쪽으로 맞출 수 있는 방법이 있습니까?해봤습니다float: right;두 번째로<span>하지만 그것은 스타일을 망치고, 날짜를 둘러싸는 디브 밖으로 밀어냅니다.

HTML을 수정할 수 있는 경우: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

플로트로 작업하는 것은 좀 지저분합니다.

이와 같은 '사소한' 레이아웃 트릭은 Flexbox를 통해 수행할 수 있습니다.

   div.container {
     display: flex;
     justify-content: space-between;
   }

2017년에는 레거시 브라우저를 지원하지 않아도 된다면 (플로트보다) 더 선호되는 솔루션이라고 생각합니다. https://caniuse.com/ #flash=flexbox

float 사용이 flexbox와 어떻게 비교되는지 확인합니다("일부 경쟁업체 답변 포함"): https://jsfiddle.net/b244s19k/25/ .https://jsfiddle.net/b244s19k/25/만약 당신이 여전히 플로트를 고수할 필요가 있다면, 저는 물론 세 번째 버전을 추천했습니다.

플로트에 대한 대안 솔루션은 절대 위치 지정을 사용하는 것입니다.

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

바이올린도 참조.

Flexbox를 사용하지 않는 솔루션justify-content: space-between.

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

사용할 때flex:1처음에<span>남은 공간 전체를 차지하고 두 번째 공간을 이동합니다.<span>오른쪽으로이 솔루션을 만지작거리는 사람: https://jsfiddle.net/2k1vryn7/

여기 https://jsfiddle.net/7wvx2uLp/3/ 에서 두 가지 플렉스박스 접근 방식의 차이점을 확인할 수 있습니다. 플렉스박스는justify-content: space-between및 플렉스박스는flex:1처음에<span>.

HTML을 수정하지 않고도 이 작업을 수행할 수 있습니다.http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

ul { /** works with ol too **/
    list-style: none; /** removes bullet points/numbering **/
    padding-left: 0px; /** removes actual indentation **/
}

언급URL : https://stackoverflow.com/questions/5067279/how-to-align-this-span-to-the-right-of-the-div