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

边框不能设置为元素总高度的50％。但你可以使用:: after＆amp; ::之前在边上绘制一些线

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

添加一些CSS。将<div class="border-right">更改为<div class="border-right" style="max-height:50%;">。

如果这不是您要找的话，请评论。

如何保持边框高度50％

2 个答案: