pływak z CSS min-width i marży

Miałem nadzieję, może być w stanie pomóc z problemem, który został doprowadza mnie do orzechów na kilka godzin teraz. Próbuję zaprojektować stronę dla wyszukiwarki, która może dodać X liczbę kryteriów, a następnie przeprowadzić wyszukiwanie. Próbuję uzyskać pole kryteriów, aby zmienić rozmiar w zależności od liczby kryteriów i rozdzielczości ekranu. Chcę, aby ładował się w początkowym rozmiarze, a następnie zmieniał rozmiar w zależności od tego, co zostało dodane do niego, aby przycisk wyszukiwania i wyniki wyszukiwania znajdowały się poniżej. Teraz mogę to zrobić za pomocą min-width:100%, ale produkuje paski przewijania, a tekst przelewa się na prawej stronie, ponieważ używam margin-left:340px; przenieść to pole na prawo, a tam jest kolejne okno z lewej nim , searchList.pływak z CSS min-width i marży

Usuwanie minimum szerokości powoduje spiralne pręty odejść, ale pole nie jest wyciągnąć dopóki element jest dodawany. Dodanie jednego elementu powoduje, że małe pole zostanie narysowane, a dopiero po dodaniu kilku z nich całe pudełko przechodzi do odpowiedniego rozmiaru. Czy jest jakiś sposób, aby przesunąć skrzynkę na bok i utrzymać ją w zgodzie z resztą strony i jaki jest najlepszy sposób, aby to osiągnąć?

To samo na Chrome i Firefox.

Skrzynka mówię jest <div id="searchCriteria"></div>. Pełny kod znajduje się poniżej. Będę naprawdę wdzięczny za każdą pomoc :)

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

Źródło

2012-12-03 Provster

dokonać jsFiddle się od tego, który jasno opisuje swój problem, tak, że możemy przetestować go i starają się wymyślić rozwiązanie – jakee

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

otrzymujesz poziomego przewijania bo mówisz przeglądarce musi wynosić co najmniej 100% szerokości. Wystarczy go przetestowany, działa z max-width nie min-width i dodaj min-width najmniejszej szerokości będziesz musiał tj:

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

Źródło

2012-12-03 13:33:28

Wielkie dzięki za to! Czy istnieje sposób na uczynienie z pudełka wartości domyślnej pełnej dostępnej szerokości, nawet jeśli nic w nim nie ma? min-width działa, ale nie mogę tego użyć do skalowania do rozmiaru dostępnego w zależności od rozmiaru okna przeglądarki. – Provster

Istnieje, ale jest kilka elementów do wzięcia pod uwagę, to znaczy czy #searchList i #content mają ustalone rozmiary? Czy pozycje searchList muszą być bezwzględne? etc –

'# content' - Ja tylko używając tego jako owijki do wyegzekwowania minimalny rozmiar na całej stronie, więc jeśli się okno przeglądarki mała, to nie będzie wyglądać opóźniony. '# searchList' - zawsze będzie to stały rozmiar. Używam pozycjonowania absolutnego, ponieważ nie musi się on unosić, i zrobiłem to, ponieważ nie mogłem tego uzyskać i '# searchCriteria' pozostawał w linii używając float. '# searchCritera' zawsze chciał być na własnej linii. – 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>

Źródło

2012-12-03 13:55:38

Dzięki za odpowiedź! Jedynym problemem jest to, że czerwone pole #searchCriteria jest teraz objęte i jest pod #searchList, które jest ustawione absolutnie. Po kliknięciu „kliknij mnie” przycisk będzie można zobaczyć nowe przedmioty są ukryte – Provster

ten został zaktualizowany, aby rozwiązać problem ukrytych przedmiotów, należy pamiętać ul.columns li.auto.searchCriteria { padding-left: 300px; } –

Cześć aby dopasować zawartość strony width:100% wykorzystania i min-width na #content.

Źródło

2012-12-03 13:58:39

Co powiesz na to, czy pływasz pod numerem #searchList i czy nie zmieniasz nazwy na #searchCriteria? (W ten sposób usuwając potrzebę min-width: 100% na.) Czy zapewnia to układ, którego szukasz?

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

Źródło

2012-12-03 13:59:14

Dzięki za to - po prostu próbowała to, ale nie wydaje się żadnej różnicy w Chrome lub Firefox – Provster

Och, oczywiście, przepraszam - 'box-sizing' nie ma żadnego wpływu na marże, głupi ja. –

@ user1872553: zredagowałem swoją odpowiedź z podejściem, które ma co najmniej pewne szanse na działanie. –

pływak z CSS min-width i marży

Odpowiedz

Powiązane problemy