Bootstrap：兩個固定div元素之間的響應div

我有一個響應式<div>元素放置在兩個固定的<div>元素之間。我試了下面的代碼：Bootstrap：兩個固定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>元素正在整個屏幕。當我嘗試結帳的寬度和高度，它已經獲得了我的整個主要<div>。有沒有什麼辦法可以把這個響應<div>固定在2個固定的<div>之內？

來源

2015-04-30 Amr

檢查下面的代碼：在這裏，我已經改變了三大事業部序列和改變顯示風格。

<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>

來源

2015-04-30 06:09:43

嘗試這樣的：

<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>

來源

2015-04-30 05:47:51

既然你把他們的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>

來源

2015-04-30 05:53:48

Bootstrap：兩個固定div元素之間的響應div

回答

相關問題