Html 最小宽度和边距的CSS浮动_Html_Css Float_Css

Html 最小宽度和边距的CSS浮动

html css

Html 最小宽度和边距的CSS浮动,html,css-float,css,Html,Css Float,Css,我希望你能帮我解决一个让我发疯几个小时的问题。我正在尝试为搜索引擎设计一个页面，可以添加X个条件，然后执行搜索。我正试图根据条件的数量和屏幕分辨率来调整条件框的大小。我希望它以初始大小加载，然后根据添加的内容调整自身大小，以便下面的搜索按钮和搜索结果向下移动。现在，我可以使用最小宽度：100%，但这会产生滚动条，文本溢出到页面右侧，因为我使用左边距：340px要将此框向右移动，因为左侧还有另一个框，searchList 删除“最小宽度”会导致滚动条消失，但在添加元素之前不会绘制长方体。添加一个元

我希望你能帮我解决一个让我发疯几个小时的问题。我正在尝试为搜索引擎设计一个页面，可以添加X个条件，然后执行搜索。我正试图根据条件的数量和屏幕分辨率来调整条件框的大小。我希望它以初始大小加载，然后根据添加的内容调整自身大小，以便下面的搜索按钮和搜索结果向下移动。现在，我可以使用

最小宽度：100%

，但这会产生滚动条，文本溢出到页面右侧，因为我使用

左边距：340px

要将此框向右移动，因为左侧还有另一个框，

searchList

删除“最小宽度”会导致滚动条消失，但在添加元素之前不会绘制长方体。添加一个元素会导致绘制一个小长方体，只有在添加几个元素后，整个长方体才会变为正确的大小。有没有什么方法可以让我把盒子移到一边，使它与页面的其余部分保持一致？实现这一点的最佳方法是什么

这在chrome和firefox上都是一样的

我说的盒子是

。完整代码如下。我非常感谢您的帮助：）


身体{
填充：0px；
边际：0px；
}
#内容{
最小宽度：950px；
}
#标题{
高度：130像素；
背景颜色：蓝色；
}
#搜索列表{
宽度：300px；
高度：400px；
背景颜色：绿色；
位置：绝对位置；
}
#搜索标准{
背景色：红色；
浮动：左；
最小高度：400px；
最小宽度：100%；
左边距：340px；
}
#搜索结果{
背景颜色：紫色；
高度：800px；
宽度：100%；
浮动：左；
}
.标准{
边框：1px纯黑；
填充：10px；
利润率：10px；
浮动：左；
宽度：400px；
}
#按钮状态{
浮动：左；
背景颜色：粉红色；
宽度：100%；
文本对齐：居中；
}
函数add（）{
$（“#searchCriteria”）.append（“”；
}
fasdfasdfasdfasdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
asdf asdf asdf asdf asdf

您得到的是水平滚动，因为您告诉浏览器的宽度至少为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;
}


身体{
填充：0px；
边际：0px；
}
#标题{
高度：130像素；
背景颜色：蓝色；
}
#搜索列表{
宽度：300px；
高度：400px；
背景颜色：绿色；
位置：绝对位置；
显示：块；
}
#搜索标准{
背景色：红色；
浮动：左；
最小高度：400px；
宽度：100%；
}
#搜索结果{
背景颜色：紫色；
高度：800px；
宽度：100%；
浮动：左；
}
.标准{
边框：1px纯黑；
填充：10px；
利润率：10px；
浮动：左；
宽度：400px；
}
#按钮状态{
浮动：左；
背景颜色：粉红色；
宽度：100%；
文本对齐：居中；
}
ul.columns{
显示：块；
浮动：左；
宽度：100%；
边际：0px；
填充：0px；
列表类型样式：无；
}
ul.columns>li{
显示：块；
浮动：左；
宽度：100%；
边际：0px；
填充：0px；
}
ul.li.auto{
最小宽度：400px；
}
ul.columns li.auto.searchCriteria{
左侧填充：300px；
}
函数add（）{
$（“#searchCriteria”）.append（“”；
}
fasdfasdfasdfasdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf








asdf asdf asdf asdf asdf

废话
废话废话废话废话废话废话废话废话废话废话废话废话废话废话

要使内容适合页面，请在

#content

上使用

宽度：100%

和

最小宽度

如果浮动

#搜索列表

，而不浮动

#搜索标准

如何？（这样就不需要在

#searchCriteria

上设置

最小宽度：100%

）这是否提供了您要查找的布局

在此基础上创建一个JSFIDLE，它清楚地描述了您的问题，这样我们就可以对其进行测试并尝试提出解决方案。答案：非常感谢！是否有任何方法可以使框默认为全宽，即使其中没有任何内容？min width可以工作，但我不能根据浏览器窗口大小使用它来缩放可用的大小。确实如此，但是有很多因素需要考虑，即#搜索列表和#内容是固定大小的吗？搜索列表位置必须是绝对的吗？etc

#content

-我只是用它作为包装，在整个页面上强制执行最小大小，这样如果你把浏览器窗口变小，它就不会显得迟钝<代码>#搜索列表-这将始终是一个固定大小。我使用绝对定位是因为它不需要浮动，而我这样做是因为我似乎无法使用浮动来获取它和

#searchCriteria

保持一致

#searchCritera

总是想独立自主。在这种情况下，你需要考虑的事情很少。i、 e.如果您的标准是流体，但列表已修复，那么如果窗口缩小，标准将转到何处？另外，总像素宽度加起来不能超过#内容宽度，否则它将开始看起来很凌乱。我的建议是放弃“内容”，将“搜索标准”的宽度设为68%；并使#搜索列表宽度：32%；。这将是一个很好的起点。谢谢你的回复！唯一的麻烦是w

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