Question

我想实现下图中显示的内容，意味着使用CSS3选择颜色。

代码目前为here。

.colors {
  background: white;
  width: 80%;
  height: 10%;
  position: absolute;
  top: 60%;
  display: inline-block;
  overflow-x: scroll;
  white-space: no-wrap;
}

.select {
  float: left;
  margin: 10px;
  color: transparent;
  z-index: 22;
  background: red;
  width: 20%;
}

<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>

我制作的div没有出现。我该怎么做才能解决这个问题？

Answer 1

您的div未显示，因为您未向其设置任何height。您在此white-space: no-wrap也有语法错误，因为它应该是white-space: nowrap。

顺便说一下，你可以简单地使用flex而不是浮动元素。使用flex时，您没有义务指定元素的高度：

.colors {
  background: white;
  width: 80%;
  height: 100px;
  margin: auto;
  display: flex;
  flex-wrap: nowrap; /* this is not mandatory as it's the default value*/
  overflow-x: scroll;
  border: 1px solid;
}

.select {
  margin: 10px;
  color: transparent;
  background: red;
  flex: 0 0 20%;
}

<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>

或inline-block解决方案。但是在这里你需要指定高度并注意溢出：

.colors {
  background: white;
  width: 80%;
  height: 100px;
  margin: auto;
  overflow-x: scroll;
  border: 1px solid;
  white-space:nowrap;
}

.select {
  margin: 10px;
  color: transparent;
  background: red;
  display:inline-block;
  height:calc(100% - 24px); /* You need to remove both margin and height of scroll*/
  width:20%;
}

<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>

Answer 2

从选择类中删除float：left方法。试试这样。

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>
</body>
</html>

＆＃13;

def isBinary(num):
    for i in str(num):
        if i in ("0","1") == False:
            return False
    return True

＆＃13;

在父div中排列水平div

2 个答案: