gpt4 book ai didi

html - 具有最小宽度和边距的 CSS float

转载 作者:太空狗 更新时间:2023-10-29 16:42:45 24 4
gpt4 key购买 nike

我希望您能帮助解决一个困扰我几个小时的问题。我正在尝试为搜索引擎设计一个页面,该页面可以添加 X 个条件然后执行搜索。我正在尝试根据条件的数量和屏幕分辨率调整条件框的大小。我希望它以初始大小加载,然后根据添加到其中的内容调整自身大小,以便下面的搜索按钮和搜索结果向下移动。现在,我可以使用 min-width:100% 来做到这一点, 但这会产生滚动条并且文本会溢出到页面右侧,因为我使用的是 margin-left:340px;将此框向右移动,因为它的左侧还有另一个框,searchList .

删除 min-width 会导致滚动条消失,但直到添加元素后才绘制框。添加一个元素会导致绘制一个小框,只有在添加几个元素后整个框才会调整到合适的大小。有没有什么方法可以将框横向移动并使其与页面的其余部分保持一致,实现此目的的最佳方法是什么?

在 chrome 和 firefox 上都是一样的。

我说的盒子是<div id="searchCriteria"></div> .完整代码如下。我真的很感激任何帮助:)

<html>
<head>
<style type="text/css">

body {
padding:0px;
margin:0px;
}

#content {
min-width:950px;
}

#header {
height:130px;
background-color:blue;
}

#searchList {
width: 300px;
height: 400px;
background-color:green;
position:absolute;
}

#searchCriteria {
background-color:red;
float:left;
min-height:400px;
min-width: 100%;
margin-left: 340px;
}


#searchResults {
background-color:purple;
height: 800px;
width: 100%;
float:left;
}

.criteria {
border: 1px solid black;
padding: 10px;
margin: 10px;
float: left;
width: 400px;

}

#buttonAndStatus {
float:left;
background-color:pink;
width:100%;
text-align:center;
}



</style>

<script type="text/javascript">

function add(){
$("#searchCriteria").append("<p class=\"criteria\">This is a bit of search criteria.</p>");
}

</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="header">fasdfasdfasdf asdf asdf asdf asdf asdf asdf </div>
<div id="content">
<div id="searchList">
<input type="button" name="button" Value="Click me" onClick="add()">
</div>
<div id="searchCriteria"></div>
<div id="buttonAndStatus"><input type="button" name="button" Value="Search "></div>
<div id="searchResults">asdf asdf asdf asdf </div>
</div>
</body>
</html>

最佳答案

您正在水平滚动,因为您告诉浏览器宽度至少为 100%。刚刚测试过,它适用于最大宽度而不是最小宽度,并添加一个最小宽度的最小宽度,即:

#searchCriteria {
background-colour:red;
float:left;
min-height:400px;
min-width:350px; /*min width of criteria box*/
max-width:100%; /*you don't want the width to be more 100%*/
margin-left:340px;
}

关于html - 具有最小宽度和边距的 CSS float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13683695/

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