Trung tâm một trong hai div anh chị em

Sau đây, tôi muốn thay đổi CSS sao cho right-sibling là thực sự là tập trung ở số container div. (Chỉnh sửa: không sử dụng định vị tuyệt đối).Trung tâm một trong hai div anh chị em

<html> 
    <head> 
    <style type='text/css'> 
     #container { 
     width: 500px; 
     } 
     #left-sibling { 
     float: left; 
     } 
     #right-sibling { 
     text-align: center; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='container'> 
     <div id='left-sibling'>Spam</div> 
     <div id='right-sibling'>Eggs</div> 
    </div> 
    </body> 
</html>

Thực hiện hiện tại, định tâm các anh chị em quyền của bị ảnh hưởng bởi các anh chị em còn lại - bạn có thể thấy điều này bằng cách thêm display: none đến phong cách 's left-sibling.

(Lưu ý: Tôi muốn tránh sửa đổi cấu trúc HTML vì, vì tôi hiểu nó, toàn bộ điểm CSS là tách cấu trúc thẻ khỏi logic trình bày và điều này dường như không thực sự điên rồ yêu cầu CSS xử lý.)

TIA.

Nguồn

2008-12-05 cdleary

Có lý do nào để không sử dụng vị trí tuyệt đối vì điều đó sẽ làm cho chính xác những gì bạn muốn không? –

Đây là một ví dụ thử nghiệm - trong trang * thực * tôi đang làm việc trên trang này được lồng trong trang và phải được định vị tương đối trong nội dung được tạo tự động. Định vị tuyệt đối chỉ hoạt động đối với những thứ như tiêu đề không bị ảnh hưởng bởi luồng không xác định. – cdleary

Bạn có thể sử dụng vị trí tương đối trong #container. Ngoài ra đó là loại thông tin là quan trọng nếu bạn muốn có một câu trả lời khá. –

Một lừa tôi chỉ sử dụng để có được điều này để làm việc là để có đệm ở bên trái của thùng chứa và chúng tôi có thể khuyến khích anh chị em bên trái ngồi bên trong không gian này bằng cách cho nó một lề bằng nhau nhưng tiêu cực.

Để hoàn thành ảnh, chúng tôi cũng đặt đệm ở bên phải của vùng chứa có kích thước bằng với chiều rộng của anh chị em trái.

<html> 
    <head> 
     <style type='text/css'>  
     #container { 
      width: 500px; 
      padding-left:50px; 
      padding-right:50px;  
      }  
     #left-sibling { 
      border: solid 1px #000; 
      float: left; 
      width:50px; 
      margin-left:-50px; 
     }  
     #right-sibling { 
      border: solid 1px #000; 
      text-align: center; 

     } 
     #container2 { 
      width: 500px; 
      } 
</style> 
    </head> 
    <body> 
     <div id='container'>  
      <div id='left-sibling'>Spam</div> 
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     <div id='container'> 
      <div id='left-sibling' style="display:none;">Spam</div>  
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     <div id='container2'> 
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     </body> 
</html>

Nguồn

2008-12-05 11:38:27 rohancragg

Tuyệt vời! Đây chính xác là những gì tôi cần. :) Trên một lưu ý phụ, bạn chỉ nên có một 'id' được áp dụng cho một phần tử trên mỗi tài liệu HTML. Đối với nhiều hơn 1 sử dụng một định danh 'lớp'. Cảm ơn một lần nữa vì giải pháp tuyệt vời. –

Công cụ tốt @rohancragg. Điều này cũng làm việc cho tôi. Tôi đã xóa toàn bộ ID và sử dụng 'lớp' thay thế. Cảm ơn bạn! – Airn5475

Bạn có thể thay đổi float: left; trên #left-sibling thành position: absolute;. Điều này sẽ đưa nó ra khỏi dòng chảy bình thường, vì vậy nó sẽ không ảnh hưởng đến anh chị em nữa.

Tất nhiên, điều này có thể có các tác dụng phụ khác với thiết kế của bạn.

Nguồn

2008-12-05 09:20:14 Greg

Điểm tốt - Tôi sẽ chỉnh sửa câu hỏi để xác định tôi muốn tránh định vị tuyệt đối. – cdleary

Bạn nên luôn luôn thiết lập chiều rộng trên các yếu tố nổi, nếu không mọi thứ trở nên kỳ lạ :)

Nếu bạn đặt một quy tắc

border: solid 1px #000;

trên cả hai divs bạn sẽ thấy những gì đang xảy ra - cáC# phải anh em ruột div đang lấp đầy toàn bộ chiều rộng của div mẹ (#container), do đó, mặc dù văn bản là thực sự được căn chỉnh đến trung tâm, có vẻ như không phải vậy!

Nguồn

2008-12-05 09:27:07

Không, điều này không chính xác. Mặc dù # right-anh chị em làm đầy toàn bộ chiều rộng, # left-sibling ảnh hưởng đến tính toán căn chỉnh văn bản. Giống như tôi nói trong câu hỏi, nếu bạn thêm 'display: none' vào kiểu cho # left-sibling thì vị trí của" Eggs "thay đổi. – cdleary

Điều này là đúng - mặc dù DIV có chiều rộng đầy đủ, đó không phải là cách căn chỉnh văn bản hoạt động - nó chỉ có thể căn chỉnh văn bản trong không gian có sẵn. Thêm trứng
Trứng
Trứng
sau văn bản trong # right-sibling và bạn sẽ thấy rằng các dòng * bên dưới * div anh em bên trái được căn chỉnh theo ý muốn. –

Vâng, tôi có nghĩa là "văn bản ** là ** thực sự được căn chỉnh đến trung tâm" không phải là một tuyên bố chính xác, bởi vì anh chị em trái đã ảnh hưởng đến tính toán định tâm. – cdleary

Thuộc tính căn chỉnh văn bản kiểm soát căn chỉnh nội dung trong vùng chứa nơi áp dụng thuộc tính. Bằng cách thêm các phong cách sau nó rất dễ dàng để xem:

#left-sibling { float: left; width:100px; border:1px Solid Blue; } 
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

tôi sẽ đề nghị bổ sung thêm một loại tài liệu vào tài liệu để tránh quirksmode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

và phong cách sau:

#container { width: 500px; position:relative; border:1px Solid Black; } 
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; } 
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

Bạn tất nhiên sẽ muốn điều chỉnh kích thước của anh chị em để phù hợp với nhu cầu của bạn. Các biên giới làm một công việc tốt đẹp cho thấy những gì đang thực sự xảy ra.

Nguồn

2008-12-05 09:38:36 MadViking

Bạn đang sử dụng vị trí tuyệt đối - không chắc chắn nếu bạn thấy rằng tôi đã sửa đổi câu hỏi sau khi @RoBorg nhận xét về câu hỏi đó. – cdleary

Hãy thử thiết lập chiều rộng bên trái-sibling và một bằng padding-phải: bên phải-sibling

như vậy

<html> 
    <head> 
    <style type='text/css'> 
     #container { 
     width: 500px; 
     } 
     #left-sibling { 
     float: left; 
     width:50px; 
     } 
     #right-sibling { 
     text-align: center; 
     padding-right:50px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='container'> 
     <div id='left-sibling'>Spam</div> 
     <div id='right-sibling'>Eggs</div> 
    </div> 
    </body> 
</html>

Nguồn

2008-12-05 09:59:26 adam

Trung tâm một trong hai div anh chị em

Trả lời

Các vấn đề liên quan