如何保持邊框高度50％

Question

想給兩個div的邊框，但是全高度看起來不太好。我想保持它50％。我怎樣才能做到這一點？

<div class="border-right"> 

    <h4>>Web Design</h4> 

    <p>Morbi ac molestie justo. Donec sagittis scelerisque enim a tempus. Integer eget purus est. Phasellus consectetur sodales enim, eu dapibus metus mollis a. Phasellus luctus nulla in eros vestibulum mattis. Mauris pellentesque sem quis tortor vestibulum lacinia. Suspendisse hendrerit enim id pulvinar euismod. Etiam et neque vitae justo dignissim laoreet sit amet eget metus. Ut tristique porttitor lorem vitae auctor. </p> 

</div> 

<div class="border-left"> 

    <h4>>Web Design</h4> 

    <p>Morbi ac molestie justo. Donec sagittis scelerisque enim a tempus. Integer eget purus est. Phasellus consectetur sodales enim, eu dapibus metus mollis a. Phasellus luctus nulla in eros vestibulum mattis. Mauris pellentesque sem quis tortor vestibulum lacinia. Suspendisse hendrerit enim id pulvinar euismod. Etiam et neque vitae justo dignissim laoreet sit amet eget metus. Ut tristique porttitor lorem vitae auctor. </p> 

</div> 

Answer 1

添加一些css。將<div class="border-right">更改爲<div class="border-right" style="max-height:50%;">。

評論這是不是你正在尋找。

Answer 2

無法將邊框設置爲元素總高度的50％。但是你可以&後使用:: ::之前吸取雙方

body{ 
 
    background-color: #f3f3f3; 
 
} 
 
div{ 
 
    height: 300px; 
 
    margin: 10px auto; 
 
    width: 300px; 
 
    background: #fff; 
 
    position: relative; 
 
} 
 
div::before{ 
 
    content: ""; 
 
    height: 50%; 
 
    display: block; 
 
    border-left: 1px solid #333; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
div::after{ 
 
    content: ""; 
 
    height: 50%; 
 
    display: block; 
 
    border-left: 1px solid #333; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.all-border{ 
 
    border: 1px solid #000; 
 
} 
 
.all-border::before, 
 
.all-border::after{ 
 
    display: none; 
 
}

<div>50% Height Border</div> 
 
<div class="all-border">100% Height Border</div>