float CSS con larghezza e margine min.

Speravo potessi essere in grado di aiutarti con un problema che mi sta facendo impazzire da alcune ore. Sto cercando di progettare una pagina per un motore di ricerca in grado di aggiungere un numero X di criteri e quindi eseguire una ricerca. Sto cercando di ottenere la casella dei criteri per ridimensionare in base al numero di criteri e alla risoluzione dello schermo. Voglio che venga caricato in una dimensione iniziale e quindi ridimensionato a seconda di cosa viene aggiunto, in modo che il pulsante di ricerca e i risultati di ricerca riportati di seguito si spostino verso il basso. In questo momento, posso farlo utilizzando un min-width:100%, ma questo produce barre di scorrimento e il testo trabocca sulla destra della pagina perché sto usando un margin-left:340px; per spostare questa casella a destra, in quanto vi è un'altra casella a sinistra di esso , searchList.float CSS con larghezza e margine min.

La rimozione della larghezza min causa l'allontanamento delle barre di scorrimento, ma la casella non viene disegnata fino a quando non viene aggiunto un elemento. L'aggiunta di un elemento fa sì che venga disegnata una piccola scatola, e solo dopo aver aggiunto alcuni elementi l'intera casella va alla giusta dimensione. C'è un modo in cui posso spostare la scatola lateralmente e tenerla in linea con il resto della pagina, e qual è il modo migliore per raggiungere questo obiettivo?

È lo stesso sia su Chrome che su Firefox.

La casella di cui sto parlando è <div id="searchCriteria"></div>. Il codice completo è sotto. Apprezzerei molto qualsiasi aiuto :)

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

fonte

2012-12-03 Provster

fare un jsFiddle fuori da questo, che descrive in modo chiaro il problema, in modo da poter verificare il lavoro svolto e cercare di trovare una soluzione di – jakee

Certo: http: // jsfiddle. net/tPHzX/ – Provster

Stai ricevendo scorrimento orizzontale perché stai dicendo che il browser è largo almeno al 100%. Appena provato, funziona con max-width non min-width e aggiungere un min-width della larghezza minima avrete cioè:

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

fonte

2012-12-03 13:33:28

Grazie mille per quello! C'è un modo per rendere la casella predefinita per l'intera larghezza disponibile anche senza nulla al suo interno? la larghezza minima funziona ma non posso utilizzarla per ridimensionarla in base alle dimensioni della finestra del browser. – Provster

Esiste, ma ci sono alcuni elementi da tenere in considerazione, ad esempio, #searchList e #content sono formati fissi? Le posizioni di SearchList devono essere assolute? ecc. –

'# contenuto' - Sto solo usando questo come un wrapper per applicare una dimensione minima sull'intera pagina, quindi se si rende la finestra del browser piccola, non sembrerà ritardata. '# searchList' - questa sarà sempre una dimensione fissa. Sto usando il posizionamento assoluto perché non ha bisogno di fluttuare, e l'ho fatto perché non riuscivo a capirlo e '# searchCriteria' per rimanere in linea usando float. '# searchCritera' ha sempre voluto essere sulla propria linea. – 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>

fonte

2012-12-03 13:55:38

Grazie per la risposta! L'unico problema è che la casella #searchCriteria rossa è ora coperta da #searchList, che è posizionata in modo assoluto. Se fai clic sul pulsante "fai clic" vedrai nuovi elementi nascosti – Provster

questo è stato aggiornato per risolvere il problema degli oggetti nascosti, nota ul.columns li.auto.searchCriteria { padding-left: 300px; } –

Ciao a rendere i contenuti adattare l'uso pagina width:100% e min-width su #content.

fonte

2012-12-03 13:58:39

Che ne dici se si fa galleggiare #searchList e non si galleggia #searchCriteria? (Eliminando così la necessità di min-width: 100% su #searchCriteria.) Fornisce il layout che stai cercando?

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

fonte

2012-12-03 13:59:14

Grazie per quello - ho appena provato questo, ma non sembra fare alcuna differenza su Chrome o Firefox – Provster

Oh, naturalmente, mi dispiace - 'dimensionamento della scatola 'non ha alcun effetto sui margini, sciocco me. –

@ user1872553: ho modificato la mia risposta con un approccio che ha almeno alcune possibilità di funzionare. –

float CSS con larghezza e margine min.

risposta

Problemi correlati