Làm thế nào để căn chỉnh khoảng này ở bên phải của div?

151

Tôi có HTML sau:

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

với CSS này:

.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;
}

Nếu bạn kiểm tra jsFiddle này: http://jsfiddle.net/8JwhZ/

bạn có thể thấy rằng Tên và Ngày được gắn với nhau. Có cách nào để tôi có thể hẹn hò với bên phải không? Tôi đã thử float: right;lần thứ hai nhưng nó làm hỏng phong cách và đẩy ngày ra bên ngoài div kèm theo

html css

— DaveDev
nguồn

2

Bạn có thể sửa đổi HTML không?

— Phrogz

3

Nếu bạn muốn một cái gì đó nổi trong mối quan hệ với một đối tượng khác, thì người nổi cần phải ở trước người không nổi. Ngày nên trước tiêu đề và nổi ngay.

— Josh Kovach

246

Nếu bạn có thể sửa đổi 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 }

— Phrogz
nguồn

CSS được đơn giản hóa và sạch sẽ thích hợp: cả hai nên được thêm vào. Ngoài ra fiddle chứa giải pháp rất dễ vỡ: jsfiddle.net/8JwhZ/2090

— Risord

9

Hoặc nếu bạn muốn nội tuyến (tôi đã làm)

— Đánh dấu

51

Làm việc với phao hơi lộn xộn:

Điều này cũng giống như nhiều thủ thuật bố trí 'tầm thường' khác có thể được thực hiện với flexbox.

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

Trong năm 2017, tôi nghĩ rằng đây là giải pháp ưa thích (vượt quá) nếu bạn không phải hỗ trợ các trình duyệt cũ: https://caniuse.com/#feat=flexbox

Kiểm tra fiddle cách sử dụng float khác nhau so với flexbox ("có thể bao gồm một số câu trả lời cạnh tranh"): https://jsfiddle.net/b244s19k/25/ . Nếu bạn vẫn cần phải sử dụng float, tôi khuyên bạn nên dùng phiên bản thứ ba.

— Risord
nguồn

Đây là cái tôi đã chọn sử dụng, hãy nhớ cũng đặt float: left;và float: right;trong các khoảng chứa các thành phần bạn muốn vào không gian.

— Ran Lottem

1

Thông điệp cốt lõi của câu trả lời này là "float được coi là có hại" và bạn không bao giờ nên sử dụng chúng (ok chắc chắn có một số trường hợp ngoại lệ hiếm gặp). Vì vậy, bạn có thể làm rõ lý do tại sao bạn nghĩ rằng đó là một ý tưởng tốt?

— Risord

1

Tôi nghĩ rằng floatđược yêu cầu trong các yếu tố bên trong bởi vì tôi nghĩ rằng nó được định nghĩa trong ví dụ fiddle cho chúng, nhưng đối với #testDnó không được xác định. Lỗi của tôi!

— Ran Lottem

25

Một giải pháp thay thế cho phao là sử dụng định vị tuyệt đối:

.title {
  position: relative;
}

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

Xem thêm các fiddle .

— Phi-líp
nguồn

5

Bạn có thể làm điều này mà không cần sửa đổi 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 }

— Kerel
nguồn

4

Các giải pháp sử dụng flexbox mà không có 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;
}

Khi chúng ta sử dụng flex:1trên đầu tiên , nó chiếm toàn bộ không gian còn lại và di chuyển thứ hai sang phải. Fiddle với giải pháp này: https://jsfiddle.net/2k1vryn7/

Tại đây https://jsfiddle.net/7wvx2uLp/3/ bạn có thể thấy sự khác biệt giữa hai cách tiếp cận flexbox: flexbox với justify-content: space-betweenvà flexbox với flex:1trên đầu tiên .

— thủy điện17
nguồn