Hoán đổi các yếu tố bằng CSS?

Question

Tôi có bố trí khá đơn giản, như thế này:

<div class="card"> 
    <span class="attack">1</div> 
    <span class="defence">2</div> 
</div> 

Họ đang sắp xếp trên đầu trang của mỗi khác với đơn giản display: block. Những gì tôi muốn đạt được là khi một thẻ ở các khu vực cụ thể, "tấn công" cho thấy ở dưới cùng và "phòng thủ" là trên đầu trang. Tôi biết tôi có thể làm cho nó với jQuery, nhưng tôi có thể đạt được hiệu ứng tương tự bằng cách sử dụng CSS tinh khiết?

Answer 1

Về mặt kỹ thuật, đây là quy tắc kinh doanh, không phải là miền của lớp mỹ phẩm của bạn. Trong một tài liệu HTML, thứ tự của các phần tử từ đầu đến cuối có ý nghĩa ngữ nghĩa - trường hợp của bạn không khác, tôi nghi ngờ, trong đó bạn đang cố gắng chỉ ra sự khác biệt về tầm quan trọng từ phần tử này đến phần tử tiếp theo (trong phần tử tài liệu, không chỉ biểu diễn trực quan) tùy thuộc vào ngữ cảnh.

Vì vậy, cách tiếp cận của bạn nên là JQuery hoặc một số phương pháp thay đổi ý nghĩa của mối quan hệ của hai yếu tố này theo thứ tự của chúng trong tài liệu. CSS được thiết kế để thay đổi chỉ xuất hiện mỹ phẩm của họ.

Với những tình huống như thế này, có thể hữu ích khi nghĩ, "nếu ai đó không thể xem các yếu tố và phải dựa vào trình đọc màn hình để đọc chúng theo thứ tự xuất hiện trong tài liệu? không chỉ nội dung của hai yếu tố, nhưng mối quan hệ của họ) vẫn còn chính xác và dễ hiểu? "

Bạn có thể không có ý định để người này có thể tiếp cận được với người khiếm thị, nhưng đó thường là kiểm tra sự tỉnh táo tốt về cách tiếp cận vấn đề như thế này.

Answer 2

Ý nghĩ đầu tiên là sử dụng vị trí tuyệt đối trong thẻ .card.

.card  { width:100px; height:50px; position:relative; } 
    .attack { width:100px; height:25px; position:absolute; top:25px; } 
    .defense { width:100px; height:25px; position:absolute; top:0; } 

Trong ví dụ này, .attack sẽ được (trực quan) dưới đây .defense. Nhưng lưu ý, nếu bạn tắt CSS, sắp xếp thực sự sẽ được nhìn thấy.

Answer 3

Không, bạn không thể. Ngay cả khi bạn quyết định cố gắng "hack" nó ra trong CSS, CSS kết quả sẽ là rất lớn, lộn xộn, và không dễ dàng duy trì. Mã jQuery tương ứng sẽ rất đơn giản bằng cách so sánh, dễ hiểu và dễ bảo trì.

Answer 4

Nếu bạn biết chiều cao của phần tử, bạn có thể sử dụng position: relative (với giá trị dương và âm) tương ứng hoặc position: absolute. Nhưng điều này là tất cả rất hacky và đi kèm với rất nhiều tác dụng phụ - tôi sẽ làm điều đó trong Javascript để thay thế.

Answer 5

Bạn có thể làm điều này bằng cách sử dụng (nếu bạn chỉ muốn làm swap trong div.card):

.card .attack { 
    position: relative; 
    top: 1em; 
} 
.card .defence { 
    position: relative; 
    top: -1em; 
} 

Nhưng như những người khác đã đề cập đến điều này có thể có một số ngoài ý muốn tác dụng phụ. Ví dụ. mẫu trên sẽ di chuyển vị trí hoán đổi chính xác chỉ cho 1 khối đường.

Answer 6

Tôi khá chắc chắn điều này sẽ làm việc:

.card { 
    width: 100px; 
    height: 150px; 
    float: left; 
} 

.attack, .defence { 
    width: 100px; 
    height: 75px; 
    clear: right; 
} 

/* Play with height and padding-top of .defence to 
get the text to the very bottom */ 
.attack-top .card .attack { 
    float: left; 
} 
.attack-top .card .defence { 
    float: right; 
    height: Wpx; 
    padding-top: Xpx; 
} 


/* Play with height and padding-top of .attack to 
get the text to the very bottom */ 
.defence-top .card .attack { 
    float: right; 
    height: Ypx; 
    padding-top: Zpx; 
} 
.defence-top .card .defence { 
    float: left; 
} 

Có một vài chi tiết còn thiếu trong mô tả của bạn, vì vậy tôi sẽ cố gắng để điền vào các giả định của tôi, và bạn có thể cho tôi biết nếu họ có hiệu lực hay không.

• Bạn đã nói "khi thẻ ở các khu vực cụ thể".Tôi cho rằng các khu vực này có thể được thể hiện bằng các lớp chứa khác nhau (.attack-top và .defence-top, nhưng đổi tên khi bạn thấy phù hợp).
• Tôi giả định rằng .card rộng 100px và cao 150px. Nếu các giá trị chiều rộng và chiều cao này sai, hãy điền đúng giá trị và thực hiện tính toán lại thích hợp. Nếu .card không có chiều rộng cố định/chiều cao, nó vẫn có thể hoạt động, nhưng tôi ít tự tin hơn và bạn sẽ không thể lấy văn bản ở dưới cùng ở phía dưới cùng của thẻ (ngay bên dưới văn bản trên cùng).