如何使这个div匹配另一列的大小？
我的桌子上有人民名字，每周都有几个星期的足球队，我需要这样做，所以其中包含所有名称的列与每周列相同，但每周列数一直很大除非我专门给它一个高度，但我不知道究竟有多大，我只是希望它变大，因为它有更多的条目。
<div class="container">
<div class="col-xs-3 text-center">
<div class="row bg-blue">Names</div>
<div class="row">Bob</div>
<div class="row">Alex</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
</div>
<div class="col-xs-9 demo">
<div class="col-xs-3 item">
<div class="row bg-blue">Week 1</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 2</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 3</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 4</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 5</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 6</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 7</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 8</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 9</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 10</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 11</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 12</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 13</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
</div>
</div>
<br /><br />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dragend.js"></script>
<script>
$(function() {
var BODY = $("body"),
container = $(".demo"),
pageElements;
$(window).on("ready resize", function(event) {
var width = $(this).width(),
itemsInPage = 1;
if (width > 1000) {
itemsInPage = 5
} else if (width > 600) {
itemsInPage = 4;
} else if (width > 400) {
itemsInPage = 2;
}
container.dragend({
pageContainer: "#container",
itemsInPage: itemsInPage,
pageClass: "item",
afterInitialize: function() {
this.container.style.visibility = "visible";
}
});
});
});
</script>
这是使用的CSS：
.demo {
background: #457;
cursor: hand;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
color:#fff;
text-align: center;
height:50%;
}
.item {
background: #354;
}
.item:nth-child(2n+0) {
background: #333;
}
1 个答案:
答案 0 :(得分：0)
您的内联样式会覆盖引导样式col-xs-3：
<div class="col-xs-3 item" style="margin: 0px; float: left; overflow-y: auto; overflow-x: hidden; padding: 0px; display: block; height: 320px; width: 171px;">
尝试删除width: 171px;或将其添加到您的名称列。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？