gpt4 book ai didi

html - Bootstrap : responsive div in between two fixed div elements

转载 作者:太空宇宙 更新时间:2023-11-04 03:08:32 24 4
gpt4 key购买 nike

我有一个响应 <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>

最佳答案

检查下面的代码:这里我改变了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>

关于html - Bootstrap : responsive div in between two fixed div elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29959835/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com