javascript 如何解决在调整浏览器大小时css中的响应行问题

m528fe3b 于 2023-02-15 发布在 Java

关注(0)|答案(3)|浏览(128)

我试着画了4条垂直等距线，如图所示。当浏览器调整大小时，这些线会从容器中出来。我怎样才能让它不受浏览器大小的影响而留在容器中呢？我是CSS的新手。如果需要更多的细节，请告诉我。

.container {
  width: 100%;
  position: relative;
  display: flex;
  padding-right: 100px;
  box-sizing: border-box;
}

.inner-container {
  display: flex;
  flex: 1;
  position: relative;
}

.bar {
  flex-grow: .8;
  display: flex;
  height: 20px;
  background-color: lightblue;
}

.blackline {
  width: 10px;
  height: 20px;
  background-color: black;
  position: absolute;
  z-index: 1;
  margin-left: 100%;
}

.line {
  width: 1px;
  height: 100%;
  position: absolute;
  background-color: #000000;
  margin-top: 2%;
}

.line1 {
  left: 0%;
}

.line2 {
  left: 30%;
}

.line3 {
  left: 60%;
}

.line4 {
  left: 89%;
}

<div class="container">
  <div class="line line1"></div>
  <div class="line line2"></div>
  <div class="line line3"></div>
  <div class="line line4"></div>
  <div class="inner-container">
    <div class="bar"></div>
    <div class="blackline"></div>
  </div>
</div>

预期的结果是在容器的起点绘制第一条线，在容器的终点绘制最后一条线，并且这两条线之间的距离相等。
所需结果

JavaScript

来源：https://stackoverflow.com/questions/75446948/how-to-resolve-the-issue-with-responsive-lines-in-css-when-the-browser-is-resize

3条答案

按热度按时间

3phpmpom1#

尝试为行添加父div并使用Flex属性。因此，您在所有响应窗口中获得相等的距离。以下是图像的示例代码。

<!DOCTYPE html>
<html>
<head>
<style>

.container{
      width: 100%;
    position: relative;
    display: flex;
    box-sizing: border-box;
}
  
 .inner-container {
      display: flex;
    flex:1;
    position: relative;
}

.bar {
    flex-grow: .8;
    display: flex;
    height: 20px;
    background-color: lightblue;
}


.blackline {
    width: 10px;
    height: 20px;
    background-color: black;
    position: absolute;
    z-index: 1;
    right: 0;
}
.line-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 100%;
}
.line {
    width: 1px;
    height: 100%;
    background-color: #000000;
}

</style>
</head>
<body>
                     
<div class="container">
  <div class="inner-container">
    <div class="line-container">    
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
    </div>
  <div class="bar"></div>
      <div class="blackline"></div>
  </div>
</div>

</body>
</html>

赞(0）回复(0）举报 2023-02-15

z4iuyo4d2#

这里我的尝试是利用flex的优势而不使用position。使用position:absolute实际上打破了flex的地位。所以我重新构造你的容器和css，使其尽可能的少，以使语法达到你想要的结果。
每个.line大小相等的神奇之处如下：

flex-grow: 1;

这里有一个很好的参考，更好地理解flex：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
不确定是不是你想要的，但希望有帮助~
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-15

cu6pst1q3#

我会在容器上使用margin而不是padding，并在内部容器flex上使用spacebeach（而不是绝对定位），这样就可以绝对地将行定位为1/3，最后一行使用right0

.container {
  width: calc(100% - 100px);
  position: relative;
  display: flex;
  margin-right: 100px;
  box-sizing: border-box;
}

.inner-container {
  display: flex;
  flex-grow: 1;
  position: relative;
  justify-content: space-between;
}

.bar {
  flex-grow: 0.8;
  display: flex;
  height: 20px;
  background-color: lightblue;
}

.blackline {
  width: 10px;
  height: 20px;
  background-color: black;
}

.line {
  width: 1px;
  height: 100%;
  position: absolute;
  background-color: #000000;
  margin-top: 2%;
}

.line1 {
  left: 0;
}

.line2 {
  left: 33.3333%;
}

.line3 {
  left: 66.6667%;
}

.line4 {
  right: 0;
}

<div class="container">
  <div class="line line1"></div>
  <div class="line line2"></div>
  <div class="line line3"></div>
  <div class="line line4"></div>
  <div class="inner-container">
    <div class="bar"></div>
    <div class="blackline"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 如何解决在调整浏览器大小时css中的响应行问题

3条答案

相关问题

热门标签

最新问答