이 범위를 div의 오른쪽에 맞추는 방법은 무엇입니까? HTML이 있습니다. <div class=”title”>

다음 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>스타일을 망쳐 놓고 날짜를 둘러싸는 div 외부로 밀어 넣습니다.

답변

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 년에는 레거시 브라우저를 지원하지 않아도되는 경우이 솔루션이 선호됩니다 (float보다) : https://caniuse.com/#feat=flexbox

다양한 float 사용법이 flexbox와 비교되는 방식을 확인하십시오 ( “경쟁 답변이 포함될 수 있습니다”) : https://jsfiddle.net/b244s19k/25/ . 여전히 플로트를 사용해야하는 경우 세 번째 버전을 권장합니다.

답변

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

.title {
  position: relative;
}

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

바이올린 도 참조하십시오 .

답변

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 }

답변

없이 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/ 두 flexbox 접근 방식의 차이점은 flexbox with justify-content: space-between와 flexbox with flex:1on the first <span>입니다.

답변