Bootstrap：响应式 div 在两个固定 div 元素之间

Question

我在两个固定的 <div> 元素之间放置了一个响应式 <div> 元素。我试过以下代码：

 <html>
 <head>
 <title>Sample1</title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
     <div style="width: auto">
         <div style="float: left; width:270px; background-color: green">Fixed div</div>
         <div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
         <div style="background-color: red" class="row">Responsive div</div>        
     </div>
</body>
</html>

目前响应式 <div> 元素占据了整个屏幕。当我尝试检查宽度和高度时，它已经获取了我的整个 main <div>。有什么方法可以把这个响应式 <div> 放在 2 个固定的 <div>?

中

Answer 1

试试这个：

<body style="display:table;width:100%;">
  <div style="float: left; width:270px; background-color: green;display:table-cell;">Fixed div </div>
  <div style="background-color: red;display:table-cell;" class="row"> Responsive div </div>  
  <div style="float: right; width: 120px; background-color: yellow;display:table-cell;"> Fixed div</div>  
</body>

Answer 2

因为你已经得到了它们的 div 宽度，我们可以利用 calc

width: calc(100% - 390px);

390px 值是左侧和骑乘侧元素宽度的总和。

<html>
 <head>
 <title>Sample1</title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
  <div style="width: auto">
    <div style="float: left; width:270px; background-color: green">Fixed div </div>
    <div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
    <div style="background-color: red;  width: calc(100% - 390px);margin-left: 270px;" class="row"> Responsive div </div>

  </div>
</body>
</html>

Answer 3

检查下面的代码：这里我改变了Div顺序并更改了三个的显示样式。

<html>
 <head>
   <title>Sample1</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
  <div style="display:table; width:100%">
    <div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
    <div style="background-color: red; display:table-cell;"> Responsive div </div>
    <div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
  </div>
</body>
</html>

Bootstrap：响应式 div 在两个固定 div 元素之间

Bootstrap: responsive div in between two fixed div elements

html

css

responsive-design

twitter-bootstrap