使用<hr>标记，我试图创建一个垂直分隔符，该分隔符可以调整其相对于左侧元素的高度。例如，如果我在高度为100px的图像之间放置一个垂直分隔符，我希望这个分隔符自动将其高度调整为100px，或者如果图像的高度为50px，那么分隔符的高度应该调整为50px。所以我想我需要使用"；高度：100%"；以使其工作，但只有当我设置了我不想要的父元素的高度时，这才有效。要求此分隔器组件的使用者确保每次使用时都设置父元素的高度是不方便的。是否可以在不设置父元素高度的情况下使用垂直分隔器动态调整高度？解决方案是什么？目前，这是我迄今为止所尝试的。https://codesandbox.io/s/divider-component-4djtzv?file=/src/App.js:0-539
import "./styles.css";
function Divider() {
return <hr className="divider-vertical" />;
}
export default function App() {
return (
<>
<div style={{ height: "40px" }}>
<h1 style={{ display: "inline-block" }}>Hello</h1>
<Divider />
<h1 style={{ display: "inline-block" }}>World</h1>
</div>
<div>
<h4 style={{ display: "inline-block" }}>Hello</h4>
<Divider />
<h4 style={{ display: "inline-block" }}>There</h4>
</div>
</>
);
}
.divider-vertical {
position: relative;
display: inline-block;
height: 100%;
margin: 0;
vertical-align: middle;
border-top: 0;
border-left: solid #e7e7e7;
}
一种方法可以是在父元素的第一个元素上使用border right来执行
.parent *:first-child
.inline {
display:inline-block;
}
.parent *:first-child {
border-right: solid 1px black;
padding-right: 5px;
}<div class="parent">
<h1 class="inline">Hello</h1>
<h1 class="inline">World</h1>
</div>
<div class="parent">
<h4 class="inline">Hello</h4>
<h4 class="inline">There</h4>
</div>另一种解决方案可以是有一个带有border-right但带有伪class元素的div，让dom的其余部分继续
- .父div必须有一个相对位置
- 除法器伪类可以具有
position:absolute和height: 100%;
.parent * {
display: inline-block;
}
.parent {
position: relative;
}
.divider::before {
position: absolute;
top: 0;
border-right: solid 1px black;
content: ' ';
height:100%;
}<div class="parent">
<h1 class="inline">Hello</h1>
<div class="divider"></div>
<h1 class="inline">World</h1>
</div>
<div class="parent">
<h4 class="inline">Hello</h4>
<div class="divider"></div>
<h4 class="inline">There</h4>
<h4 class="inline">There</h4>
<h4 class="inline">There</h4>
<h4 class="inline">There</h4>
<div class="divider"></div>
<h4 class="inline">There</h4>
<h4 class="inline">There</h4>
</div>CSS单行：
div { display: flex; }
示例：
article {
display: flex;
}<article>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae vestibulum augue, id imperdiet ipsum. Pellentesque sodales ligula non dapibus porttitor. Donec malesuada turpis quis mi congue, id blandit enim euismod. Nulla laoreet mauris bibendum, ultrices mi ac, tristique sapien. In feugiat, arcu ac egestas mollis, nisl justo congue sapien, non tincidunt est nibh ac nibh. Aliquam vitae ligula at neque suscipit dapibus at sed ipsum. Mauris congue ipsum sit amet ex sodales, vel vehicula augue porta. Curabitur aliquam ex massa, porta tristique dui consectetur ut. Duis a justo ac sem gravida dapibus. In tortor tortor, fringilla ac nunc ac, aliquet euismod turpis. Pellentesque non blandit diam, eu ullamcorper diam. Duis mi est, euismod molestie sodales nec, porta vel libero.
</p>
<p>
Phasellus quis ante faucibus, lacinia mi eget, eleifend dui. Nullam est arcu, dignissim non dolor vel, facilisis lacinia sem. Nunc vitae metus porta, venenatis mi non, ullamcorper enim. Donec sit amet nunc lectus. Maecenas eu arcu posuere ex malesuada elementum vel ac ipsum. Curabitur sollicitudin dolor rhoncus sapien placerat rutrum. Morbi sed tempor urna, sed pharetra ipsum. Nunc eget lorem suscipit, viverra sem vel, sodales nisi. Pellentesque eu turpis dui. Nullam ut justo et ante rhoncus mollis a vel metus. Vestibulum dapibus quam vel ultrices pellentesque. Sed et placerat orci. Fusce varius massa purus, id porttitor magna pretium in. Donec gravida nulla risus.
</p>
<p>
Sed nunc ante, pulvinar a tincidunt ac, porttitor at massa. Phasellus porta sed lorem eu dapibus. Pellentesque quis aliquet ex. Nulla consequat, arcu vitae efficitur vehicula, nisi dolor tincidunt quam, volutpat congue massa leo id lectus. Aliquam sagittis ante sit amet ultricies venenatis. Quisque varius nec metus sit amet vulputate. Fusce sit amet ligula in purus bibendum ullamcorper in eget mauris. Aenean mattis ex ut molestie ornare. In mi odio, tristique id rhoncus ullamcorper, sodales non turpis. Sed posuere, magna sed semper auctor, neque est faucibus nisl, non aliquet risus ipsum vel augue. Pellentesque eu velit interdum urna volutpat sodales ac sit amet diam. Pellentesque vel malesuada risus, porttitor faucibus risus. In laoreet, nisl at eleifend rhoncus, sem mi pellentesque nisi, vitae sollicitudin nisi purus id nunc.
</p>
</div>
<hr>
<div>
<p>
In dictum lectus elit, nec vestibulum neque tempus vitae. Nam eget convallis mauris. In hac habitasse platea dictumst. Duis condimentum quam vitae urna mattis, lobortis vulputate mi commodo. Donec et risus mi. Aliquam finibus pharetra velit et interdum. Proin ut lorem eu nulla faucibus facilisis ut quis quam. Fusce risus tortor, tristique sed bibendum ac, aliquam vitae enim. Proin malesuada laoreet sagittis. Integer euismod sagittis magna, quis vehicula mauris sodales vitae. Donec diam tellus, faucibus non tellus sed, venenatis lobortis augue. Mauris vestibulum odio non venenatis dictum. Proin faucibus, est dapibus commodo sollicitudin, eros justo auctor ligula, auctor sodales leo diam quis arcu. Vestibulum eget luctus dolor. Donec mauris orci, efficitur eu vehicula et, efficitur at nulla. Aliquam in tortor sed mi pretium malesuada in vel urna.
</p>
<p>
Proin congue lacus aliquet gravida mollis. Integer non ligula odio. Vestibulum feugiat tristique ante, eu feugiat ex dignissim eget. Ut congue urna eget ipsum consequat, vel porttitor nibh cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam laoreet urna sed ipsum volutpat lacinia. Mauris at eleifend ligula, eu sodales tellus. Pellentesque vitae laoreet sapien, sit amet congue sem.
</p>
</div>
</article>这个解决方案可能与您的其他样式要求相冲突，但经过一些调整的flexbox可能仍然是一个有用的解决方案。