CSS / HTML

Question

有没有办法在css / html中实现以下行为：

请注意绿色侧栏没有响应，但我不能用

给它一个固定的宽度

width: XX px;

因为它可以包含更多或更少的元素，所以事先不知道XX。

棕色条必须有响应并占据所有剩余宽度。

提前感谢任何伎俩！我已经尝试了表但没有成功，因为我们无法指定div来限制它与必要的。

Answer 1

您可以使用flexbox轻松实现这一目标。这是一个例子： http://codepen.io/anon/pen/JKXXNE

#container {
  display:flex;
}
#sidebar, #content {
  height: 100px;
}
#sidebar {
  background-color: green; 
}
#content {
  background-color: brown;
  flex: 1;
}

Answer 2

您可以使用 Flexbox ，如果您在右flex: 1设置div，则会占用剩余的可用空间，而左div的宽度仍然是动态的。

.parent {
  display: flex;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  padding: 10px;
  flex: 1;
}
span {
  margin: 0 20px;
}

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

这也可以通过 CSS表格布局来完成，您只需要在width: 100% div上设置.right，它将占用剩余的可用空间

.parent {
  display: table;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  display: table-cell;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  display: table-cell;
  width: 100%;
  padding: 10px;
}
span {
  margin: 0 20px;
}

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

Answer 3

对于旧版浏览器，请使用display: table

＆＃13;

＆＃13;

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
}
.row{
  display:table-row;
}
.cell{
  display:table-cell;
}
.content{
  width: 100%;
}
#left_col {
  background: orange none repeat scroll 0 0;
  width: 1%;
}
#right_col {
  background: green none repeat scroll 0 0;
  width: 100%;
}

＆＃13;

<div class="tbl content">
  <div class="row">
    <div id="left_col" class="cell">
      wide&nbsp;content&nbsp;<br>
      content&nbsp;<br>
      wider&nbsp;contentcontent&nbsp;<br>
    </div>
    <div id="right_col" class="cell"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在不使用flexbox 的情况下实现此的另一种方法可以是：

工作小提琴：

https://jsfiddle.net/y00e5w6m/ （注意我已经使用了示例css和输入来展示如何做到这一点。这应该根据要求调整一下）

示例输出：

<强> HTML

<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>

<强> JS：

var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;

console.log(otherContentWidth);

$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());