元素内部元素内部元素的水平滚动(100％宽度)，其宽度为百分比

Question

我正在使用Bootstrap3在我的应用程序中创建页面。

页面i的某个地方的某个地方具有列(col-md-6(，哪个宽度是按百分比计算的。我目前的目标是用一组子元素填充该元素，尊重以下规则：

1. 每个子元素的高度必须从父元素继承；
2. 每个子元素的宽度必须等于父元素的宽度；
3. 必须水平放置子元素；
4. 父元素必须具有水平滚动才能导航到元素。

如果我们使用固定值(在px中(，则任务变得非常容易。喜欢这里http://jsfiddle.net/vueyg/

，但我不知道如何以百分比值解决。我的意思是，好的，我可以添加一些宽度等于n*100％的包装元件(其中 N是子元素的数量(。但是，问题是如何将儿童元素的宽度设置为100％？：(

有人可以给出建议吗？

谢谢

Answer 1

如果我了解您的要求，我相信您可以使用flex-box实现这一目标。

请注意，只需直接CSS即可实现这一目标。如果有兴趣，这里有flex-box的彻底崩溃。

#mask {
  display: block;
  height: 100px;
  width: 100%;
  overflow-x: scroll;
}
content {
  display: flex;
  align-content: flex-start;
  width: 200%;
  height: 100%;
}
content > div {
  flex-grow: 1;
  height: 100%;
  background-color: #f00;
  border: 1px solid #fff;
}

<div id="mask">
  <content>
    <div></div>
    <div></div>
  </content>
</div>

Answer 2

由于您的JSFIDDLE使用类名中的IMG引用。也许这可以解决您的挑战

http://getbootstrap.com/javascript/#carousel

这是您试图完成

Answer 3

使用一些jQuery代码，您可以根据最外部的div宽度来完成所有操作：

var childElementsNum = $('#wrapper')[0].childElementCount;
var itemWidth = $('#containersimg').width()
var itemSize = $('#containersimg').width() + 10; //here we add the 5px margin to left and right
$('#wrapper').css("width", itemSize * childElementsNum + 'px');
$('.square').css("width", itemWidth + 'px');

#wrapper {
  height: 110px;
}
#containersimg {
  background-color: #bbb;
  width: 500px;
  height: 135px;
  overflow: hidden;
  overflow-x: scroll;
}
.square {
  background-color: #00b;
  float: left;
  height: 90px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containersimg">
  <div id="wrapper">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>

，但我真的建议您使用一些插件，我建议猫头鹰旋转木马：https://owlcarousel2.github.io/owlcarousel2/

Answer 4

要水平放置元素，您需要添加float：left;在指定元素的TE CSS中

我替换了您放入链接

的.square CSS

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 18%;
   margin: 1%;
}

width =内容为18％，每一侧的边距= 1％

它以相同的方式工作

您可以在另一个内部创建一个列，并设置Bootstrap Col-LG ...属性，但您可能无法使用水平滚动