如何保持边框高度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>