4
Tạo một hàng ngang của các đối tượng tương đương với nhau là một trong những điều khác trong thiết kế web khó khăn hơn nhiều so với nó. Đây có thể là một điều rất hữu ích để làm, đặc biệt là trong bố trí chiều rộng chất lỏng khi bạn đang cố gắng tận dụng tối đa bất kỳ không gian ngang nào bạn có. Dưới đây là các mục tiêu chúng tôi đang cố gắng đạt được:

  • Các trái hầu hết đối tượng được rời liên kết với nó là yếu tố phụ huynh.
  • Đối tượng bên phải nhất được căn phải với phần tử cha của nó.
  • Mỗi đối tượng đều bình đẳng với nhau mọi lúc.
  • Các đối tượng sẽ dừng việc chồng chéo lẫn nhau khi cửa sổ trình duyệt thu hẹp.
  • Các đối tượng sẽ không bao bọc khi cửa sổ trình duyệt thu hẹp.
  • Kỹ thuật này sẽ làm việc trong một môi trường chiều rộng chất lỏng . Thậm chí một trong đó là trung tâm .




Tôi đã thử một số kỹ thuật khác nhau để thử và đạt được điều này. Chúng ta hãy trải qua tất cả các thất bại của tôi và sau đó đến kỹ thuật cuối cùng có vẻ hoạt động khá tốt.

FAIL : Cung cấp cho mỗi đối tượng một vị trí còn lại phần trăm



Đầu tiên tôi cho mỗi hình ảnh một lớp duy nhất:

<img src="images/shape-red.png" class="first-r">
<img src="images/shape-green.png" class="second-r">
<img src="images/shape-yellow.png" class="third-r">
<img src="images/shape-blue.png" class="fourth-r">


Sau đó, tôi đã định vị trái dựa trên tỷ lệ phần trăm cho mỗi lớp đó:

img.first-r { left: 0%; position: relative; }
img.second-r { left: 25%; position: relative; }
img.third-r { left: 50%; position: relative; }
img.third-r { left: 75%; position: relative; }


Chú ý vị trí tương đối. Điều này là bắt buộc để có được hình ảnh ngoài cùng bên trái để tôn trọng yếu tố cha mẹ giả sử nội dung được căn giữa và không được căn trái. Vấn đề với điều này là lề trái được áp dụng cho đối tượng ngoài cùng bên phải là 75% chiều rộng cửa sổ trình duyệt, nhưng được áp dụng bắt đầu ở bên trái của phần tử cha chứ không phải cửa sổ trình duyệt . Điều này có thể khiến phần tử bên phải nhất tắt màn hình (không tôn trọng cạnh phải của phần tử cha). Ngoài ra, không thể giải thích được, phần tử này cuối cùng sẽ bao bọc nếu bạn di chuyển cửa sổ trình duyệt đủ hẹp.

Nếu bạn chuyển sang định vị tuyệt đối ở đây, bạn sẽ giải quyết một số vấn đề ở trên nhưng sau đó các đối tượng của bạn sẽ được căn trái và bỏ qua hoàn toàn các phần tử cha ở vị trí bên trái. Ngoài ra, ở kích thước cửa sổ trình duyệt đủ hẹp, hình ảnh sẽ chồng lên nhau. Nhưng này, ít nhất là các đối tượng là bình đẳng!

FAIL: Cung cấp cho các đối tượng một tỷ lệ phần trăm bên trái chung



Cú đâm tiếp theo của tôi là đưa ra từng yếu tố, ngoại trừ yếu tố đầu tiên , tỷ lệ phần trăm còn lại chung.

<span class="do-not-wrap">
	<img src="images/shape-red.png">
	<img src="images/shape-green.png" class="mover">
	<img src="images/shape-yellow.png" class="mover">
	<img src="images/shape-blue.png" class="mover">
</span>


Áp dụng lề:

img.mover {
	margin-left: 15%;
}


Bạn sẽ có thể nói từ việc nhìn vào tỷ lệ phần trăm rằng kỹ thuật này sẽ bị tiêu diệt. Tôi chỉ chọn một tỷ lệ có vẻ hoạt động tốt nhất. Không có gì toán học tôi có thể nghĩ rằng sẽ làm việc ở đây. Bởi vì phần tử cha là phần trăm chiều rộng của cửa sổ trình duyệt và lề là phần trăm của cửa sổ trình duyệt không phải là phần tử cha, nên tốc độ tăng trưởng sẽ rất khó khớp. Cũng lưu ý khoảng "không bọc", cần thiết để ngăn ... chờ cho nó ... gói. Nhưng này, ít nhất là các đối tượng là bình đẳng!

FAIL: Chỉ cần sử dụng một bảng!



Ngay cả "ném vào khăn" trên CSS dường như không hoạt động ở đây. Tôi nghĩ rằng điều này sẽ hoạt động chắc chắn, vì các bảng có khả năng đôi khi rất hữu ích - đôi khi gây phẫn nộ để tự động không gian các ô của nó.

<table>
	<tr>
		<td class="leftalign">
			<img src="images/shape-red.png">
		</td>
		<td>
			<img src="images/shape-green.png">
		</td>
		<td>
			<img src="images/shape-yellow.png">
		</td>
		<td class="rightalign">
			<img src="images/shape-blue.png">
		</td>
	</tr>
</table>


Lưu ý các lớp sắp xếp bổ sung trong các ô đầu tiên và cuối cùng. Nếu tất cả các ô được căn giữa, điều đó cho phép các đối tượng tương đương nhau nhưng sau đó không phải đối tượng bên trái hoặc đối tượng bên phải được căn chỉnh theo cạnh của phần tử cha. Điều này có thể giải quyết được bằng cách áp dụng căn lề trái cho ô ngoài cùng bên trái và căn lề phải cho ô ngoài cùng bên phải - nhưng sau đó các đối tượng không còn tương đương nhau . Trở lại với bản vẽ.

PASS: Đầu tiên bên trái, thả phần còn lại bên phải vào các ô có kích thước bằng nhau



May mắn là ý tưởng bàn làm nảy sinh một số suy nghĩ. Hình ảnh đầu tiên cần được căn trái, nhưng tất cả những hình còn lại có thể được căn phải. Trong thực tế, nếu chúng là, và cả bên trong các hộp phân chia phần còn lại của không gian đó một cách đồng đều, điều đó có thể làm điều đó. Có lẽ điều này được giải thích trực quan nhất:



HTML:

<img src="images/shape-red.png">
<div id="movers-row">
	<div><img src="images/shape-green.png"></div>
	<div><img src="images/shape-yellow.png"></div>
	<div><img src="images/shape-blue.png"></div>
</div>


CSS:

#movers-row {<font>
	margin: -120px 0 0 120px;<font>
}<font>
#movers-row div {<font>
	width: 33.3%;<font>
	float: left;<font>
}<font>
#movers-row div img {<font>
	float: right;<font>
}</font></font></font></font></font></font></font></font></font>


Có một trang ví dụ , nơi tôi đang làm việc này. Nó không đẹp ... nhưng bạn có thể thấy người chiến thắng ở phía dưới. Tôi chắc rằng một số bạn có một số giải pháp tốt hơn cho việc này, vì vậy hãy để tôi có nó!

Bài viết gốc tại đây .
|