Question

我有小时到小时水平线（也使用slick jQuery plugin）使用多个元素创建，如下图所示：

不幸的是，每次缩小时，行无法自动调整，而不能响应，但会被破坏。我尝试更改line-0 width:100%的属性或自动添加overflow:hidden;，但不起作用。

HTML：

<div class="hour">
    <div id="1" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">00:00-01:00</div>
            <div class='fl line-0'></div>                   
    </div>
    <div id="2" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">01:00-02:00</div>
            <div class='fl line-0'></div>                   
    </div>
    <div id="3" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">02:00-03:00</div>
            <div class='fl line-0'></div>                   
    </div>  
    <div id="4" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">03:00-04:00</div>
            <div class='fl line-0'></div>                   
    </div>  
</div>

CSS：

.kurohige {
    border: 1px solid #fff;
    border-radius: 20px;
    color: #ffffff;
    font-family: "am";
    font-size: 18px;
    padding: 7px 10px;
    text-align: center;
}

.fl {
    float: left;
}

.line-0 {
    background: #ffffff none repeat scroll 0 0;
    height: 2px;
    margin: 18px 0; 
    width: 100px;
    overflow:hidden;
}

有人对此有任何建议或解决方案吗？我是否需要使用 bootstrap 来解决此问题？

之前感谢...

Answer 1

如果您愿意，并且您的浏览器支持允许，您可以使用flexbox解决方案来满足您的需求（您可以通过@ css-tricks.com查看一个不错的flexbox引用{{3} }）。

<强> EDITED ::

我整理了以下代码片段，也可以在jsbin here上看到。

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.times {
  padding: 20px;
  background-color: #f00;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.times__time {
  text-align: center;
  position: relative;
  min-width: 20%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.times__time:before,
.times__time:after {
  position: absolute;
  content: '';
  top: 50%;
  margin-top: -0.5px;
  border: 1px solid white;
}
.times__time:before {
  left: 0;
  right: 50%;
  /* This must be half of the size of the label*/
  margin-right: 12.5px;
}
.times__time:after {
  right: 0;
  left: 50%;
  /* This must be half of the size of the label*/
  margin-left: 12.5px;
}

.times__time:first-of-type:before,
.times__time:last-of-type:after {
  border: none;
}

.time__time-label {
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 100%;
  color: #fff;
}

<!DOCTYPE html>
<head></head>
<body>
  <div class="times">
    <div class="times__time">
      <div class="time__time-label">A</div>
    </div>
    <div class="times__time">
      <div class="time__time-label">B</div>
    </div>
    <div class="times__time">
      <div class="time__time-label">C</div>
    </div>
  </div>
</body>

如果调整输出大小，则行将在项之间延伸。我希望这是你想要的行为。

希望它有所帮助！

如何使用css制作自动尺寸水平线DIV？

1 个答案: