Question

我正在使用具有动态内容的Angular JS创建应用。如何使用CSS将动态宽度相对于彼此的可变数量的div定位？

更具体地说，这是一个图表：

这三个div位于另一个div（灰色）内，overflow-x: scroll和overflow-y:hidden。目前，div位于float: left，但是当我调整窗口大小以使灰色div变小时，绿色div会在跳到下方时消失另外两个。

我希望绿色div保持一致，并为其设置灰色的div滚动条帐户。我已经尝试white-space: nowrap有没有办法做到这一点？

代码可以是viewed here。

＆＃13;

root {
	display: block;
}

.cardPanel {
	position: absolute;
	top: 125px;
	bottom: 75px;
	left: 0px;
	right: 0px;
	overflow-x: scroll;
	overflow-y: hidden;
	background-color: #BFBFBF;
}

.cardPanelDiv {
	float: left;
	top: 0px;
	height: 100%;
	white-space:nowrap;
}

.cardDividerDiv {
	float: left;
	top: 0px;
	height: 100%;
	width: 75px;
	white-space:nowrap;
}

.cardDivider {
	position: abolute;
	margin-left: 10px;
	top: 0px;
	bottom: 0px;
	width: 5px;
	background-color: #808080;
}

.cardDividerWords {
	position: abolute;
	left: 0px;
	top: 0px;	
}

＆＃13;

<div class="cardPanel">
  <div class="cardDividerDiv" style="background-color: yellow">This is a div</div>
  <div class="cardPanelDiv" style="background-color: red">More div things I just love. I just noticed that I randomly picked the colours of stoplights for this.</div>
  <div class="cardPanelDiv" style="background-color: green">Just more oh so nice div. It is just so lovely to look at because this one is GREEN!</div>
  <div class="cardPanelDiv" style="background-color: blue">Here's another div that jumps down to the next line. It shouldn't jump. It should just scroll.</div>
</div>

＆＃13;

Answer 1

我想我没有做最好的工作来解释这个问题。无论如何，我figured out该怎么做：

.container {
  position: absolute;
  top: 75px;
  bottom: 75px;
  background-color: #808080;
  display: block;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
.container .panel-outer {
  display: inline-block;
  height: 100%;
}
.container .panel-inner {
  display: inline-block;
}

<div class="container">
  <div class="panel-outer" style="background-color:yellow">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
  <div class="panel-outer" style="background-color:green">
    <div class="panel-inner" />jdklf;uoijdhksjkasdfjksasldkfjasdlfkasd;fksdsdf
  </div>

  <div class="panel-outer" style="background-color:blue">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
  <div class="panel-outer" style="background-color:red">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
  <div class="panel-outer" style="background-color:cyan">
    <div class="panel-inner" />adsfasdfasdfasdfassdfasdfadsfasdfasdfasdfdfasdfdsfasdfasdfasdfadsfasdfadsfdf
  </div>
</div>

Answer 2

嗨，请看这里：http://plnkr.co/edit/6TdWj7Oe5IuDN0ewF4Ro?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  <div class="grey">
   <div class="yellow"></div>
   <div class="red"></div>
   <div class="green"></div>
   </div>
  </body>

</html>

CSS：

body,
html {
  height: 100%;
}
.grey {
  width: 100%;
  background-color: #d2d2d2;
  height: 100%;
}
.yellow {
  width: 10%;
  float: left;
  background-color: yellow;
  height: 100%;
}
.red {
  width: 30%;
  float: left;
  background-color: red;
  height: 100%;
}
.green {
  width: 40%;
  float: left;
  background-color: green;
  height: 100%;
}

将具有动态宽度的div相对于彼此水平放置

2 个答案: