Question

我在容器中有几个div，连续排列。

$(document).ready(function() {
  $('#swap').click(function() {
    $('#container').find('div.blue').each(function() {
      $(this).removeClass('blue');
      $(this).addClass('green');
    });
  });
});

#container {
  border: 1px solid black;
  border-right: 0px;
  width: 500px;
  min-height: 40px;
}
#left {
  float: left;
}
#right {
  float: right;
}
.purple {
  background-color: #9471AB;
  width: 70px;
}
.red {
  background-color: #D48A8A;
  width: 40px;
}
.green {
  background-color: #A4B995;
  width: 50px;
}
.blue {
  background-color: #95AEB9;
  width: 75px;
}
.red,.green,.blue,.purple {
  height: 40px;
  float: left;
  box-sizing: border-box;
  border-right: 1px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <div class="purple">
    </div>
    <div class="purple">
    </div>
    <div class="purple">
    </div>
  </div>
  <div id="middle">
    <div class="red">
    </div>
  </div>
  <div id="right">
    <div class="blue">
    </div>
    <div class="blue">
    </div>
    <div class="green">
    </div>
  </div>
</div>
<br/>
<button id="swap">Swap</button>

.purple，.blue，.green是定义的宽度，但不是.red。对于这个例子，我给它一个宽度。

我希望.red的宽度等于#left和#right之间的差距。我可以将它放在所有这些之下并使宽度等于容器宽度，但我正在寻找对文本友好的东西。

我放了一个按钮，将所有.blue更改为.green。 .red应相应地拉伸其宽度，以便没有间隙。某些方案可能在右侧有两个.green和一个.blue，有些可能是三个.blue或三个.green等等。它应该是动态的，而不是针对其他班级的宽度。

Answer 1

flexbox解决方案

$(document).ready(function() {
  $('#swap').click(function() {
    $('#container').find('div.blue').each(function() {
      $(this).removeClass('blue');
      $(this).addClass('green');
    });
  });
});

* {
  box-sizing: border-box;
}

#container {
  border: 1px solid black;
  border-right: 0px;
  width: 500px;
  margin: 10p auto;
  display: flex;
  justify-content: space-between;
}

#left {
  display: flex;
}
#middle {
  display: flex;
  flex:1;
}

#right {
  display: flex;
}
.purple {
  background-color: #9471AB;
  width: 70px;
}
.red {
  background-color: #D48A8A;
  flex:1;
}
.green {
  background-color: #A4B995;
  width: 50px;
}
.blue {
  background-color: #95AEB9;
  width: 75px;
}
.red,.green,.blue,.purple {
  height: 40px;
  border-right: 1px black solid;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <div class="purple">
    </div>
    <div class="purple">
    </div>
    <div class="purple">
    </div>
  </div>
  <div id="middle">
    <div class="red">
    </div>
  </div>
  <div id="right">
    <div class="blue">
    </div>
    <div class="blue">
    </div>
    <div class="green">
    </div>
  </div>
</div>
<br/>
<button id="swap">Swap</button>

Answer 2

<强>更新 http://jsfiddle.net/w4rxg7v3/1/

这种方法可让您拥有左右动态宽度，其余为中间填充。

<div class="middle">
    <div class="left"></div>
    <div class="right"></div>
    <p>Content for Middle: cupiditate blanditiis dolorum natus!</p>
</div>

=============================================== =============

http://jsfiddle.net/w4rxg7v3/

您可以使用float和calc()完成此操作。

使第一个div浮动：左，右div浮动：向右，然后使中间一个浮动向左或向右。然后将其宽度设置为calc( 100% - sumofwidthothertwodivs)

body {
         min-width: 500px;    
}
.left,.middle,.right {
    height: 80px;
}

.left {
    background-color: blue;
    width: 200px;
    float: left;
}
.middle {
    width: calc( 100% - 400px ) ;
    float: right;
    background-color: red;
}
.right {
    background-color: green;
    float: right;
    width: 200px;
}

Div宽度等于两个其他div之间的间隙

2 个答案: