我在两个固定的<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>
内?
答案 0 :(得分:1)
由于你已经获得了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>
&#13;
答案 1 :(得分:1)
检查下面的代码:这里我改变了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>
&#13;
答案 2 :(得分:0)
试试这个:
<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>