CSS浮动最小宽度和边距答案

【问题标题】：CSS float with min-width and marginCSS浮动最小宽度和边距
【发布时间】：2012-12-03 23:21:41
【问题描述】：

我希望您能帮助解决一个困扰我几个小时的问题。我正在尝试为搜索引擎设计一个页面，该页面可以添加 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>

【问题讨论】：

用这个制作一个jsFiddle，清楚地描述你的问题，以便我们可以测试它并尝试提出解决方案
当然：jsfiddle.net/tPHzX

标签： html css-float css

【解决方案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;
}

【讨论】：

非常感谢！有没有办法让盒子默认为全宽，即使里面什么也没有？ min-width 有效，但我不能使用它来根据浏览器窗口大小缩放到可用的大小
有，但有很多元素需要考虑，即#searchList 和#content 是固定大小的吗？ searchList 位置是否必须是绝对的？等
#content - 我只是用它作为一个包装器来强制整个页面的最小尺寸，所以如果你把浏览器窗口变小，它看起来不会迟钝。 #searchList - 这将始终是固定大小。我使用绝对定位是因为它不需要浮动，我这样做是因为我似乎无法得到它并且#searchCriteria 使用浮动保持一致。 #searchCritera 一直想独善其身。
在这种情况下，您需要考虑的事情很少。即，如果您的标准是流动的，但如果窗口缩小，则列表固定在哪里？此外，总像素宽度加起来不能超过#content 宽度，否则它会开始看起来很乱。我的建议是放弃#content，使#searchCriteria width:68%;并使#searchList 宽度：32%；。这将是一个很好的起点。

【解决方案2】：

您好，要使内容适合页面，请在#content 上使用width:100% 和min-width。

【讨论】：

【解决方案3】：

<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;
display:block;
}

#searchCriteria {
background-color:red;
float:left;
min-height:400px;
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;
}

ul.columns {
    display:block;
    float:left;
    width:100%;
    margin:0px;
    padding:0px;
    list-type-style:none;
}

ul.columns > li {
    display:block;
    float:left;
    width:100%;
    margin:0px;
    padding:0px;
}

ul.columns li.auto {
    min-width:400px;
}

ul.columns li.auto.searchCriteria {
    padding-left:300px;
}


</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">
-->
        <ul class="columns">
            <li class="auto">
                <div id="searchList">
                    <input type="button" name="button" Value="Click me" onClick="add()">
                </div>
            </li>

            <li class="auto searchCriteria">
                <div id="searchCriteria"></div>
            </li>

            <li>
                <div id="buttonAndStatus"><input type="button" name="button" Value="Search "></div>
            </li>

            <li>
                <div id="searchResults">asdf asdf asdf asdf
                    <ul>
                        <li>blah</li>
                        <li>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </li>
                    </ul>
                </div>
            </li>
        </ul>
<!--
    </div>
-->
</body>
</html>

【讨论】：

感谢您的回复！唯一的问题是红色的#searchCriteria 框现在被#searchList 覆盖并位于其下方，它是绝对定位的。如果您单击“单击我”按钮，您将看到新项目被隐藏
这个已经更新修复了隐藏项目的问题，注意 ul.columns li.auto.searchCriteria { padding-left:300px; }

【解决方案4】：

如果你浮动#searchList，而不浮动#searchCriteria，怎么样？（因此无需在#searchCriteria 上使用min-width: 100%。）这是否提供了您正在寻找的布局？

http://jsfiddle.net/uDtJ3/1/

【讨论】：

谢谢 - 我刚刚尝试过，但在 Chrome 或 Firefox 上似乎没有任何区别
哦，当然，抱歉 - box-sizing 对边距没有任何影响，我很傻。
@user1872553：已经用至少有一些工作机会的方法编辑了我的答案。