使用<hr>標簽，我正在嘗試創建垂直分隔線，可以調整其相對于左側元素的高度。例如，如果我在高度為 100 像素的影像之間放置垂直分隔線，我希望此分隔線自動將其高度調整為 100 像素，或者如果影像的高度為 50 像素，則分隔線的高度應調整為 50 像素。所以我認為我需要使用“高度：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;
}
uj5u.com熱心網友回復：
一種方法是在父元素的第一個元素上使用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>uj5u.com熱心網友回復：
另一種解決方案是讓 div 帶有 aborder-right但帶有偽類元素，讓其余的 dom 繼續
- .parent 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>uj5u.com熱心網友回復：
單行 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可能仍然是一個有用的解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/435181.html
標籤：javascript html css 反应