gpt4 book ai didi

html - 如何使宽度为: auto work with float?

转载 作者:太空宇宙 更新时间:2023-11-03 23:58:36 25 4
gpt4 key购买 nike

我注意到有几个关于此类问题的评论,其中包装器内只有 2 个 div,没有任何 float ,但我找不到任何带有 float 和几个 div 的问题。

所以这是一个问题:如何让容器 div 自动填充剩余的宽度?我需要保留 float 和任何显示:内联 block 等解决方案无法解决这个问题。

请随时将代码复制到您的记事本中,以便实时查看:

<html>
<head>
<style>
#wrapper
{
width: 100%;
height: 100%;
border: 1px black solid;
}

.block1 {
width: auto;
float:left;
min-height: 500px;
display: inline-block;
background-color: green;
}
.block2 {
display: inline-block;
float:left;
min-height: 500px;
width: 200px;
background-color: red;
}
.block3 {
display: inline-block;
float:left;
height: 30px;
width: 10%;
background-color: yellow;
}
.block4 {
display: inline-block;
float:left;
height: 30px;
width: 90%;
background-color: purple;
}
</style>
</head>
<body>

<div id="wrapper">
<div class="block4">topmenu</div>
<div class="block3">profilebar</div>
<div class="block2">leftmenu</div>
<div class="block1">content</div>
</div>

</body>
</html>

Here is a JSFiddle example

最佳答案

.block1 中移除 floatdisplay 并设置 margin-leftmargin -top 像这样:

.block1 {
width: auto;
min-height: 500px;
margin-top:30px;
margin-left:200px;
background-color: green;
}

Here is a working example

关于html - 如何使宽度为: auto work with float?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17725041/

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