Question

我有一个父div，需要在其中浮动两个子div元素。第一个具有固定宽度，第二个将是各种轮播，其中包含不可预测的元素数量。我想要的是-轮播会随着越来越多的子元素出现而自动扩展，并且按比例，父级也应扩展，但只能扩展到一定程度（机体宽度的90％）。除此之外，父元素应保持固定宽度，第二个子元素也应保持固定宽度，并且第二个子元素内的元素可以水平滚动。

我的HTML是这样的：

.parent {
  max-width: 90%;
  width: fit-content;
  margin: 10px auto;
  background: yellow;
  height: 100px;
  display: inline-block;
}

.child1,
.child2 {
  float: left;
}

.child2 {
  height: 60px;
  background: green;
  width: calc(100%-30px);
  margin-left: 10px;
  overflow-x: auto;
}

.child3 {
  width: 80px;
  height: 60px;
  float: left;
  margin-right: 10px;
  background: pink;
}

.clear {
  width: 100%;
  height: 0;
  clear: both;
}

<div class='parent'>
  <div class='child1'>
    Foo
  </div>
  <div class='child2'>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
    <div class='child3'></div>
  </div>
  <div class='clear'></div>
</div>

执行此命令时，它工作正常，但是因为子容器中子元素的数量不足以容纳我的监视器大小。当我添加更多子元素（.child3）以将父元素推到可用宽度的90％以上时，我发现在向下推子元素的同时出现了垂直滚动条，而不是水平滚动条。

如何使它水平滚动，同时保持相同的固定宽度（calc(100%-30px)），并且两个子元素并排浮动？这是fiddle。

Answer 1

您可以使用SELECT TOP (1) ol.ProductID, SUM(ol.OrderLineQuantity) FROM OrderLine ol Inner Join [Order] o ON ol.OrderID = o.OrderID WHERE o.OrderStatus = 'Completed' GROUP BY ol.ProductID ORDER BY SUM(ol.OrderLineQuantity) DESC;属性，但前提是您无需使用white-space。使所有内容float代替。

在inline-block函数中也有一个错误：calc符号后应有一个空格，否则它将被解析为两个值100％和-30px，中间没有运算符。

.parent {
  max-width: 90vw;
  margin: 10px auto;
  background: yellow;
  height: 100px;
  display: inline-block;
  white-space: nowrap;
}

.child1,
.child2 {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}

.child2 {
  height: 60px;
  background: green;
  width: calc(100% - 30px);
  margin-left: 10px;
  overflow-x: auto;
}

.child3 {
  width: 80px;
  height: 60px;
  display: inline-block;
  margin-right: 10px;
  background: pink;
}

.clear {
  width: 100%;
  height: 0;
  clear: both;
}

Answer 2

我认为找到了如何制作所需的水平滚动条。在.Child2上，这些样式似乎起了最大的作用。 max-width: 90%; overflow: auto; overflow-x: scroll; white-space: nowrap;

<div class="parent">
    <div class="child1">
        <p>Foo</p>
    </div>
    <div class="child2">
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
        <div class="child3"></div>
    </div>
    <div class="clear"></div>
</div>

.parent {
    position: relative;
    max-width: 90%;
    width: auto;
    margin: 10px auto;
    background: #ebe573;
    border: 1px solid #fffa0c;
    height: 100px;

}
.child1, .child2 {
    float: left;
}
.child2 {
    height: 80px;
    background: green;
    width: calc(100%-30px);
    margin: 8px;
    position: relative;
    max-width: 90%;
    overflow: auto;
    overflow-x: scroll;
    white-space: nowrap;
}
.child3 {
    width: 80px;
    height: 40px;
    display: inline-block;
    margin: 0 10px;
    margin-top: 10px;
    background: #00ff15;
}

如何根据孩子的内容自动扩展父母

2 个答案: