Làm thế nào tôi có thể đặt một đường thẳng đứng xuống trung tâm của một div?

Question

Làm cách nào để đặt một đường thẳng đứng xuống giữa một div? Có lẽ tôi nên đặt hai div bên trong div và đặt một biên giới trái trên một và một biên giới bên phải trên khác? Tôi có một thẻ DIV và tôi cần phải đặt một mã ascx ở bên trái (nó sẽ bị hoán đổi theo thời gian với một mã ascx khác) và sau đó là một mã ascx tĩnh ở bên trái. Bất kỳ ý tưởng về cách tôi nên làm điều này? Có lẽ tôi đã trả lời câu hỏi của chính mình.

Bất kỳ con trỏ sẽ là tuyệt vời

Answer 1

Tôi nghĩ rằng cách tiếp cận DIV nhiều của bạn sẽ là cách Sanest để tiếp cận này:

<DIV> 
    <DIV style="width: 50%; border-right: solid 1px black"> 
     /* ascx 1 goes here */ 
    </DIV> 
    <DIV style="width: 50%"> 
     /* ascx 2 goes here */ 
    </DIV> 
</DIV> 

Answer 2

Chỉ cần thử nghiệm điều này; hoạt động:

<div id="left" style="width:50%;float:left;background:green;">left</div> 
<div id="right" style="margin-left:50%;border-left:solid 1px black;background:red;">right</div> 

Answer 3

Ba div?

<DIV> 
    <DIV> 
     /* ascx 1 goes here */ 
    </DIV> 
    <DIV style="width:1px; background-color: #000"></DIV> 
    <DIV> 
     /* ascx 2 goes here */ 
    </DIV> 
</DIV> 

Answer 4

Tôi nghĩ bạn cần div bao bọc có hình nền. Nếu không, sau đó bạn không được đảm bảo để có biên giới đi tất cả các cách từ trên xuống dưới.

<div class="wrapper"> 
    <div>Float this one left</div> 
    <div>float this one right</div> 
</div> 

* đảm bảo để khoảng trống giữa trái và phải để hình ảnh hiển thị.

bạn sẽ cần một phong cách mà trông giống như:

.wrapper{background:url(img.jpg) 0 12px repeat-y;} 

Answer 5

Có lẽ điều này có thể giúp bạn

.here:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px dotted #ff0000; 
 
    transform: translate(-50%); 
 
} 
 

 
div { 
 
    margin: 10px auto; 
 
    width: 60%; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    position:relative; 
 
    text-align:center 
 
}

<div class="here">Content</div>

Dưới đây là là một bản demo JSFiddle.

Answer 6

Dưới đây là một cách hiện đại hơn để vẽ một đường xuống một div. Chỉ cần mất một chút css:

.line-in-middle { 
 
    width:400px; 
 
    height:200px; 
 
\t background: linear-gradient(to right, 
 
\t        transparent 0%, 
 
\t        transparent calc(50% - 0.81px), 
 
\t        black calc(50% - 0.8px), 
 
\t        black calc(50% + 0.8px), 
 
\t        transparent calc(50% + 0.81px), 
 
\t        transparent 100%); 
 
\t }

<div class="line-in-middle"></div>

trình trong tất cả các trình duyệt hiện đại. http://caniuse.com/#search=linear-gradient

Answer 7

Đây là phiên bản của tôi, một dòng giữa dốc bằng linear-gradient

.block { 
 
     width:400px; 
 
     height:200px; 
 
     position:relative; 
 
} 
 
.block:before { 
 
     content:""; 
 
     width:1px; 
 
     height:100%; 
 
     display:block; 
 
     left:50%; 
 
     position:absolute; 
 
\t  background-image: -webkit-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: -moz-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: -ms-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: -o-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: linear-gradient(top, #fff, #000, #fff); 
 
\t }

<div class="block"></div>