Hướng dẫn how to draw a line between two columns in html - cách vẽ một dòng giữa hai cột trong html

Tôi cần có khả năng tách hai cột bằng một đường thẳng đứng:

some text here

some more text here

Hỏi ngày 8 tháng 1 năm 2015 lúc 14:21Jan 8, 2015 at 14:21

1

Sử dụng CSS border-right:1px solid black để đạt được điều này. Bản demo tại đây: //jsfiddle.net/swm53ran/35/

html:

some text here

some more text here

CSS

.border-right {
    border-right: 1px solid black;
}

Đã trả lời ngày 8 tháng 1 năm 2015 lúc 15:45Jan 8, 2015 at 15:45

Indubitableeindubitableeindubitablee

8.0282 Huy hiệu vàng24 Huy hiệu bạc48 Huy hiệu đồng2 gold badges24 silver badges48 bronze badges

1

Phải mở ở trang đầy đủ để xem Biên giới!

Thêm các mệnh đề Media Width trong CSS để không có bất kỳ biên giới khó chịu nào ở phía thân thiện với thiết bị di động. Hi vọng điêu nay co ich! Điều này sẽ thay đổi kích thước theo chiều dài của cột dài nhất. Được thử nghiệm trên .col-MD-4 và .col-MD-6 và giả định của tôi là nó tương thích với phần còn lại. Không có đảm bảo mặc dù.

JSfiddle

.row {
  overflow: hidden;
}

.cols {
  padding-bottom: 100%;
  margin-bottom: -100%;
  overflow: hidden;
}

@media[min-width: 992px] {
  .col-md-4:not[:first-child], 
  .col-md-6:not[:first-child] {
    border-left: 1px solid black;
  }
  .col-md-4:not[:last-child],
  .col-md-6:not[:last-child] {
    border-right: 1px solid black;
    margin-right: -1px;
  }
}

.col-md-6

Enter some text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

.col-md-4

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Đã trả lời ngày 16 tháng 2 năm 2018 lúc 14:55Feb 16, 2018 at 14:55

1

Tôi đồng ý với trước đó, nhưng tôi muốn thêm một giải pháp nữa.

Bạn có thể sử dụng thuộc tính cột và nếu bạn làm điều đó, có một tùy chọn quy tắc cột, thêm một dòng hoàn hảo giữa các cột. Ở đây bạn có thể đọc và xem trên ví dụ những gì tôi muốn nói.

Đã trả lời ngày 22 tháng 2 năm 2018 lúc 11:44Feb 22, 2018 at 11:44

Nesha Zoricnesha ZoricNesha Zoric

5.72839 huy hiệu bạc34 Huy hiệu đồng39 silver badges34 bronze badges

Làm cách nào để thêm một ranh giới giữa các cột trong HTML?

Chỉ định chiều rộng, kiểu và màu của quy tắc giữa các cột: Div {Cột-Rule: 4px Double #FF00FF; } Hãy tự mình thử ».
Chia văn bản trong một phần tử thành ba cột: Div {Cột số: 3; } Hãy tự mình thử ».
Chỉ định khoảng cách 40 pixel giữa các cột: Div {Cột gap: 40px; } Hãy tự mình thử ».

Làm thế nào để bạn thêm một đường phân chia trong HTML?

Thẻ HTML được sử dụng để tạo một đường ngang với mục đích phân chia các phần của trang. tag is used to create a horizontal line with the purpose of dividing sections of a page.

Làm thế nào để bạn tạo một đường phân cách dọc trong HTML?

Để tạo một đường thẳng đứng, hãy sử dụng thuộc tính Biên giới bên trái hoặc Biên giới.Thuộc tính chiều cao được sử dụng để đặt chiều cao của phần tử biên giới [đường dọc].Thuộc tính vị trí được sử dụng để đặt vị trí của đường thẳng đứng.use border-left or border-right property. The height property is used to set the height of border [vertical line] element. Position property is used to set the position of vertical line.

Làm cách nào để chèn một đường thẳng đứng trong hai cột?

Nếu bạn muốn thêm một đường thẳng đứng giữa các cột, hãy mở hộp thoại Cộtgiữa.open the Columns dialog box. Choose Page Layout > Columns. At the bottom of the list, choose More Columns. In the Columns dialog box, select the check box next to Line between.

Bài Viết Liên Quan

Chủ Đề