Question

我有这个设置

HTML：

body, html {
  margin: 0;
  height: 100%;
}

.cont{  
  border:solid 1px red;
  display:inline-block;
}

.left {
  float: left;
  width: 300px;
  height: 30px;
  border:solid 1px #000;
}

.big{
  width:600px;
}
  
.right {
  border:solid 1px #000;
  min-width:200px;
  overflow: auto;
  height: 30px;
  padding-left:5px;
  padding-right:10px;
  padding-top:3px;
  background:green
}

<div class='cont'>
  <div class='left'>1</div>
  <div class='left'>2</div>
  <div class='left big'>3</div> 
  <div class='left big'>4</div> 
  <div class='right'>Dynamic Div</div>
</div>

那些喜欢

的人

Codepen link

我需要将'right'div放在div 4的右边。如果在放置编号的div之后剩下的＆gt; = 200px的剩余空间，则输入文本div会被挤压在那里。我不希望这样。

基本上'右'div总是需要在最后编号的div的右边，并填充右边的剩余空间。如果剩余空间小于200px，则div应移动到下一行。

每个编号的div都有不同的宽度，尽管这可能无关紧要。

我可以在没有jquery的情况下实现这个目标吗？

感谢。

编辑：我能够使用flexbox

完成此操作

.cont{  
    border:solid 1px red;
    display:flex;
    flex-wrap: wrap;
}

.right {
    flex-grow:1;
    border:solid 1px #000;
  .....
}

Answer 1

使用弹性盒可以完成这项工作。

在jsfiddle上查看。

Snippet（使用width：fit-content更新）：

body, html {
  margin: 0;
  height: 100%;
}

.cont {
  border: solid 1px red;
  /*display: inline-block;*/
  display: flex; /* added */
  flex-wrap: wrap; /* added */
  
  width: -webkit-fit-content; /* chrome 22+, opera 15+, safari 6.1+ */
  width: -moz-fit-content; /* firefox 3+ */
  width: fit-content; /* default */
}

.left {
  border: solid 1px #000;
  float: left;
  height: 30px;
  /*width: 300px;*/
  min-width: 300px; /* added */
  max-width: 300px; /* added */
  box-sizing: border-box; /* added */
}

.big {
  /*width: 600px;*/
  max-width: 600px; /* added */
  min-width: 600px; /* added */
}

.right {
  border: solid 1px #000;
  min-width: 200px;
  overflow: auto;
  height: 30px;
  padding-left: 5px;
  padding-right: 10px;
  padding-top: 3px;
  background: green;
  flex: 1; /* added */
}

<div class='cont'>
  <div class='left'>1</div>
  <div class='left'>2</div>
  <div class='left big'>3</div>
  <div class='left big'>4</div>
  <div class='right'>Dynamic Div</div>
</div>

您可以从以下链接了解有关flexboxes的更多信息：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://www.w3schools.com/css/css3_flexbox.asp

动态调整大小并将div放在容器的末端（右/底部）

1 个答案: