5

ここ数時間頭がおかしくなっている問題を解決してくれるかもしれないと思っていました。X 個の基準を追加して検索を実行できる検索エンジン用のページを設計しようとしています。基準の数と画面の解像度に応じて、基準ボックスのサイズを変更しようとしています。初期サイズでロードしてから、追加されたものに応じてサイズを変更して、下の検索ボタンと検索結果が下に移動するようにします。現在、 を使用してこれを行うことができます min-width:100%が、これによりスクロールバーが生成され、テキストがページの右側にオーバーフローします。これは、 を使用しmargin-left:340px;てこのボックスを右に移動しているためです。その左側に別のボックスがあるためsearchListです。

min-width を削除すると、スクロール バーがなくなりますが、要素が追加されるまでボックスは描画されません。要素を 1 つ追加すると、小さなボックスが描画され、いくつかの要素を追加して初めて、ボックス全体が適切なサイズになります。ボックスを横に移動して、ページの残りの部分と一直線に並べることができる方法はありますか?これを達成するための最良の方法は何ですか?

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

4 に答える 4

1

ブラウザに幅が少なくとも 100% になるように指示しているため、水平スクロールが発生しています。テストしたところ、min-width ではなく max-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;
}
于 2012-12-03T13:33:28.243 に答える
0

width:100%こんにちは。コンテンツをページの用途に合わせて作成min-widthします#content。

于 2012-12-03T13:58:39.090 に答える
0

#searchList浮いていて浮いていない場合はどう#searchCriteriaですか？min-width: 100%（したがって、 onの必要がなくなり#searchCriteriaます。）それはあなたが探しているレイアウトを提供しますか？

于 2012-12-03T13:59:14.830 に答える
0 
<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>
于 2012-12-03T13:55:38.463 に答える