最小幅とマージンを持つCSS浮動小数点

私は今、数時間、私を苦労させている問題を助けることができたと思っていました。私は、X個の基準を追加して検索を実行できる検索エンジン用のページを設計しようとしています。私は基準の数と画面の解像度に応じてサイズを変更する基準ボックスを取得しようとしています。最初のサイズでロードし、追加された内容に応じてサイズを変更して、検索ボタンと検索結果が下に移動するようにします。今はmin-width:100%を使用してこれを行うことができますが、これはスクロールバーを生成し、テキストは右に移動します。なぜなら、このボックスを左に移動するにはmargin-left:340px;を使用しているからです。、searchList。最小幅とマージンを持つCSS浮動小数点

最小幅を削除するとスクロールバーが消えますが、要素が追加されるまでボックスは描画されません。 1つの要素を追加すると、小さなボックスが描画されます。追加した後にのみ、ボックス全体が適切なサイズになります。私は箱を横に動かし、それを他のページと一直線に保つことができる何らかの方法はありますか？これを達成する最良の方法は何ですか？

クロムとファイアフォックスの両方で同じです。

私が話しているボックスは<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>

出典

2012-12-03 Provster

我々はそれをテストし、ソリューション – jakee

確かに思い付くしようとすることができるように、明確に自分の問題を説明しており、このうちjsFiddleを作る：ます。http：// jsfiddle。 net/tPHzX/ – Provster

あなたは幅が少なくとも100％とし、ブラウザを言っているので、あなたは、水平スクロールを取得しています。ちょうどそれをテストし、それが最大幅のない分幅で動作し、あなたはすなわち必要があります最小幅の最小幅を追加：コンテンツがページ使用width: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; 
}

出典

2012-12-03 13:33:28

ありがとうございました！何も入っていなくてもボックスのデフォルト値を全幅にする方法はありますか？ min-widthは動作しますが、ブラウザのウィンドウサイズに応じて使用可能なサイズに拡大縮小することはできません – Provster

ありますが、#searchListと#contentの固定サイズを考慮するとかなりの要素がありますか？ searchListの位置は絶対的でなければならないのですか？ –

'＃content' - これは、ページ全体に最小サイズを適用するためのラッパーとして使用していますので、ブラウザウィンドウを小さくすると遅く見えません。 '＃searchList' - これは常に固定サイズです。 floatを使う必要がないので絶対的な位置付けを使用しています。私はそれを得ることができないので、これを行い、 '＃searchCriteria'はfloatを使ってラインにとどまります。 '＃searchCritera'は常にそれ自身の行になりたかったのです。 – Provster

<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-03 13:55:38

返信いただきありがとうございます！唯一の問題は、赤の#searchCriteriaボックスが#searchListで覆われていることです。これは絶対的に配置されています。「クリックしてください」ボタンをクリックすると、新しいアイテムが隠されていることが表示されます – Provster

これは隠しアイテムの問題を修正するために更新されました ul.columns li.auto.searchCriteria { padding-left：300px; } –

こんにちはをし、 min-widthの#content。

出典

2012-12-03 13:58:39

#searchListを浮かべて浮動小数点を浮動小数点に変換するとどうなりますか？#searchCriteria？（したがって、min-width: 100%の必要性を#searchCriteriaに取り除きます。これはあなたが探しているレイアウトを提供しますか？