CSS以最小宽度和边距浮动

Question

CSS以最小宽度和边距浮动

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

删除最小宽度会导致滚动条消失,但在添加元素之前不会绘制框.添加一个元素会导致绘制一个小框,只有在添加几个框之后,整个框才会变为正确的大小.是否有某种方法可以将盒子侧向移动并使其与页面的其余部分保持一致,实现这一目标的最佳方法是什么？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dig*_*lla 1

您会得到水平滚动，因为您告诉浏览器宽度至少为 100%。刚刚测试过，它适用于 max-width 而不是 min-width 并添加您将拥有的最小宽度的 min-width ，即：

#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;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年前
查看次数：	2069 次
最近记录：	13 年前