CSS以最小寬度和邊距浮動

Question

我希望你能幫助解決一個讓我瘋狂幾個小時的問題。 我正在嘗試為搜索引擎設計一個頁面，該頁面可以添加X個條件，然后執行搜索。 我正在嘗試讓條件框重新調整大小，具體取決於條件數量和屏幕分辨率。 我希望它以初始大小加載，然后根據添加到它的內容自行調整大小，以便下面的搜索按鈕和搜索結果向下移動。 現在，我可以使用min-width:100% ，但這會產生滾動條，文本溢出到頁面右側，因為我使用的是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>

Answer 1

您正在獲得水平滾動，因為您告訴瀏覽器寬度至少為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;
}

Answer 2

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

Answer 3

嗨，使內容適合頁面使用width:100% #content上的width:100%和min-width 。

Answer 4

如果你浮動#searchList ，並且不浮動#searchCriteria怎么#searchCriteria ？ （因此在#searchCriteria上刪除了min-width: 100%的#searchCriteria 。）這是否提供了您正在尋找的布局？

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

CSS以最小寬度和邊距浮動

問題描述

4 個解決方案

解決方案1
1 2012-12-03 13:33:28

解決方案2
0 2012-12-03 13:55:38

解決方案3
0 2012-12-03 13:58:39

解決方案4
0 2012-12-03 13:59:14

CSS以最小寬度和邊距浮動

問題描述

4 個解決方案

解決方案1 1 2012-12-03 13:33:28

解決方案2 0 2012-12-03 13:55:38

解決方案3 0 2012-12-03 13:58:39

解決方案4 0 2012-12-03 13:59:14

解決方案1
1 2012-12-03 13:33:28

解決方案2
0 2012-12-03 13:55:38

解決方案3
0 2012-12-03 13:58:39

解決方案4
0 2012-12-03 13:59:14