[英]How to keep content of a div always visible despite moving scrollbar down
[英]How to keep the divider in a div in sync with the top arrow of the div always even if the content changes in the div using react and css?
我希望 div 内的分隔线正好位于 div 的顶部箭头下方。 现在我有如下内容:
下面是我的代码,
function Parent() {
return (
<div className="wrapper">
<div className="flex_wrapper">
<button> click </button>
<div className="box">
<BoxContent />
</div>
</div>
</div>
);
}
function BoxContent() {
return (
<div className="box_content_wrapper">
{true && (
<>
<Available />
<div className="spacing" />
<span>
Available <br />
<span className="sub_text">some text</span>
</span>
<div className="divider" />
</>
)}
<Available />
<div className="spacing" />
<span>
Available <br />
<span className="sub_text">some text</span>
</span>
</div>
);
}
function Available() {
return (
<div className="view">
<span>10</span> //when i change these values to any big number also i want the divider
//and the arrow to be
//in just below each other
<span>/100</span> //when i change these values to any big number also i want the divider
//and the arrow to be in just below each other
</div>
);
}
下面是css
.wrapper {
height: 40px;
display: flex;
z-index: 4;
background-color: #fff;
border-bottom: 1px solid #cccccc;
position: relative;
}
.flex_wrapper {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
}
.box {
padding: 16px;
height: 61px;
border-radius: 8px;
border: 1px solid black;
background-color: white;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 72px;
left: 35px;
}
.box::after {
content: "";
width: 0px;
height: 0px;
position: absolute;
background-color: black;
top: -4px;
left: 141px;
border-left: 8px solid;
border-left-color: #fff;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
transform: translateY(-50%) rotate(-90deg);
}
.box_content_wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.view {
display: flex;
flex-direction: row;
align-items: baseline;
margin-top: 8px;
}
.sub_text {
white-space: nowrap;
}
.spacing {
width: 8px;
}
.divider {
height: 37px;
margin-left: 16px;
margin-right: 16px;
border: 1px solid grey;
}
您可以在此处找到工作示例: https : //codesandbox.io/s/blissful-bush-mj7lz?file=/src/App.js
我不确定如何保持分隔符和箭头同步,即使可用组件中的数据含义,即使我将跨度内容更改为一些较大的数字,分隔符和箭头也应位于彼此的下方。
我该怎么做?
我在这里编辑了您的沙箱。
唯一应用的更改如下:
position: relative;
在元素.divider
。:after
(与顶部箭头相关的那个)。 现在箭头将元素.divider
作为父元素。 这样,无论内容里面的值有多长,箭头都会一直停留在分隔线的上方(请查看下图)。.divider:after
),因此它将始终停留在容器的顶部,并且关于分隔线居中对齐( left
值来自计算0 - width of the arrow / 2
)。 新值如下: top: -32px; left: -4px;
top: -32px; left: -4px;
您可以在下面找到所有修改后的 CSS:
.App { font-family: sans-serif; text-align: center; } .wrapper { height: 40px; display: flex; z-index: 4; background-color: #fff; border-bottom: 1px solid #cccccc; position: relative; } .flex_wrapper { flex: 1; display: flex; justify-content: flex-start; align-items: center; } .box { padding: 16px; height: 61px; border-radius: 8px; border: 1px solid black; background-color: white; position: absolute; display: flex; justify-content: center; align-items: center; top: 72px; left: 35px; } .box_content_wrapper { display: flex; flex-direction: row; align-items: center; } .view { display: flex; flex-direction: row; align-items: baseline; margin-top: 8px; } .sub_text { white-space: nowrap; } .spacing { width: 8px; } .divider { height: 37px; margin-left: 16px; margin-right: 16px; border: 1px solid grey; position: relative; } .divider::after { content: ""; width: 0px; height: 0px; position: absolute; background-color: black; top: -32px; left: -4px; border-left: 8px solid; border-left-color: #fff; border-bottom: 8px solid transparent; border-top: 8px solid transparent; transform: translateY(-50%) rotate(-90deg); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.