सीएसएस फ्लोट न्यूनतम चौड़ाई और मार्जिन

मुझे आशा थी कि आप किसी समस्या के साथ मदद कर सकेंगे जो मुझे कुछ घंटों के लिए पागल कर रहा है। मैं एक खोज इंजन के लिए एक पृष्ठ तैयार करने की कोशिश कर रहा हूं जो एक्स मानदंडों को जोड़ सकता है और फिर एक खोज कर सकता है। मैं मानदंडों की संख्या और स्क्रीन रिज़ॉल्यूशन के आधार पर मानदंड बॉक्स को फिर से आकार देने की कोशिश कर रहा हूं। मैं इसे प्रारंभिक आकार में लोड करना चाहता हूं, और उसके बाद जो भी जोड़ा गया है उसके आधार पर स्वयं का आकार बदलना चाहता हूं, ताकि नीचे खोज बटन और खोज परिणाम नीचे जाएं। अभी, मैं इसे min-width:100% का उपयोग करके कर सकता हूं, लेकिन यह पृष्ठ के दाईं ओर स्क्रॉलबार और टेक्स्ट ओवरफ़्लो उत्पन्न करता है क्योंकि मैं इस बॉक्स को दाईं ओर ले जाने के लिए margin-left:340px; का उपयोग कर रहा हूं, क्योंकि इसके बाईं ओर एक और बॉक्स है , searchList।सीएसएस फ्लोट न्यूनतम चौड़ाई और मार्जिन

न्यूनतम चौड़ाई को हटाने से स्क्रॉल बार दूर जाने का कारण बनता है, लेकिन फिर बॉक्स को तब तक नहीं खींचा जाता जब तक कोई तत्व जोड़ा नहीं जाता है। एक तत्व जोड़ना एक छोटा सा बॉक्स खींचा जाता है, और केवल कुछ जोड़ने के बाद पूरा बॉक्स सही आकार पर जाता है। क्या कोई रास्ता है कि मैं बॉक्स के किनारे को स्थानांतरित कर सकता हूं और इसे शेष पृष्ठ के साथ रख सकता हूं, और इसे प्राप्त करने का सबसे अच्छा तरीका क्या है?

यह क्रोम और फ़ायरफ़ॉक्स दोनों पर समान है।

मैं जिस बॉक्स के बारे में बात कर रहा हूं वह <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। नेट/टीपीएचजेएक्स/ – Provster

आप क्षैतिज स्क्रॉल हो रही है क्योंकि आप ब्राउज़र की चौड़ाई में कम से कम 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

इसके लिए बहुत बहुत धन्यवाद! क्या इसमें पूर्ण चौड़ाई के लिए बॉक्स को डिफॉल्ट बनाने का कोई तरीका है, इसमें कुछ भी नहीं है? न्यूनतम चौड़ाई काम करता है लेकिन मैं ब्राउजर विंडो आकार – Provster

के अनुसार उपलब्ध आकार में स्केल करने के लिए इसका उपयोग नहीं कर सकता हूं, लेकिन विचार करने के लिए कुछ तत्व हैं यानी #searchList और #content एक निश्चित आकार हैं? क्या खोज सूची की स्थिति पूरी होनी चाहिए? आदि –

'# सामग्री' - मैं सिर्फ पूरे पृष्ठ पर न्यूनतम आकार को लागू करने के लिए इसे एक रैपर के रूप में उपयोग कर रहा हूं ताकि यदि आप ब्राउज़र विंडो को छोटा बनाते हैं, तो यह मंद नहीं होगा। '# खोजसूची '- यह हमेशा एक निश्चित आकार होगा। मैं पूर्ण स्थिति का उपयोग कर रहा हूं क्योंकि इसे तैरने की आवश्यकता नहीं है, और मैंने ऐसा इसलिए किया क्योंकि मुझे लगता है कि फ्लोट का उपयोग करके लाइन में रहने के लिए मुझे यह नहीं मिल रहा था और '# खोजकर्ता'। '# 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 { पैडिंग-बाएं: 300px; } –

हाय सामग्री पृष्ठ उपयोग फिट बनाने के लिए width:100% और min-width#content पर।

स्रोत

2012-12-03 13:58:39

अगर आप #searchList पर फ़्लोट करते हैं, और #searchCriteria पर फ़्लोट नहीं करते हैं? (इस प्रकार min-width: 100%#searchCriteria पर आवश्यकता को हटा रहा है।) क्या वह लेआउट प्रदान करता है जिसे आप ढूंढ रहे हैं?

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

स्रोत

2012-12-03 13:59:14

इसके लिए धन्यवाद - मैंने अभी कोशिश की लेकिन यह क्रोम या फ़ायरफ़ॉक्स – Provster

पर कोई फर्क नहीं पड़ता है, ओह, ज़ाहिर है, 'बॉक्स-साइजिंग' का मार्जिन पर कोई प्रभाव नहीं पड़ता है, मुझे मूर्खतापूर्ण। –

@ user1872553: मेरे उत्तर को उस दृष्टिकोण के साथ संपादित किया है जिसमें कम से कम काम करने का कुछ मौका है। –

सीएसएस फ्लोट न्यूनतम चौड़ाई और मार्जिन

उत्तर

संबंधित मुद्दे