affichage: bloc css ne fonctionne pas dans l'élément div?

voici mon code:affichage: bloc css ne fonctionne pas dans l'élément div?

Je construis la barre de recherche avec un nom de marque de l'entreprise et quelques bouton à droite, et la barre de recherche est au milieu. Je veux que comme nous réduisons à 786px largeur (de l'écran) puis barre de recherche (de "recherche par:" jusqu'au bouton "Go!") Pour passer à la ligne suivante. mais mon code ne fonctionne pas comme prévu. Qu'est-ce qui ne va pas?

Merci d'avance!

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>test5</title> 
<link rel="stylesheet" type="text/css" href="test5.css"> 
</head> 
<body> 

<div class="center"> 
<div class="qwert" id="abc1"> 
    <a id="Home" href="www.bookavanue.com"><b>Brand</b></a> 
</div> 
<div class="qwert" id="abc3"> 
    <button id="Register" type="button">Register</button> 
    <button id="Login" type="button">Log In</button> 
    <button id="Cart" type="button">Cart</button> 
</div> 
<div class="qwert" id="abc2"> 
    <div id="abcd1"> 
     <label for="Search">Search by:</label> 
      <select value="Title"> 
       <option>option1</option> 
       <option>option2</option> 
       <option>option3</option> 
      </select> 
      <select value="All Books"> 
       <option>option1</option> 
       <option>option2</option> 
       <option>option3</option> 
      </select> 
    </div> 
    <div id="abcd2"> 
     <input id="Search" type="text" name="Search your book" 
     placeholder="Search Your Books..."> 
    </div> 
    <div id="abcd3"> 
     <button id="Go" type="Search">Go!</button> 
    </div> 
</div> 
</div> 
</body> 
</html>

css

#abc1{ 
float: left; 
width: 110px; 
} 
#abc3{ 
float: right; 
width: 185px; 
text-align: right; 
} 
#abc2{ 
display: block; 
width: auto; 
} 
#abcd1{ 
float: left; 
width: 220px; 
} 
#abcd3{ 
float: right; 
width: 40px; 
text-align: right; 
} 
#abcd2{ 
width: calc(100% - 270px); 
display: inline-block; 
} 
input{ 
width: 100%; 
} 
@media screen and (min-width: 786px){ 
#abc2{ 
    width: calc(100% - 295px); 
    display: inline-block; 
} 
}

Source

2017-06-27 rahul Kushwaha

768>

@SleekGeek pour réduire. –

Ensuite, modifiez min-width: 786px à max-width: 768px avant toute autre chose. –

ajouter clear:both propriété ... sur votre élément abc2 fiddle

#abc2.qwert{ 
    clear:both; 
    }

Source

2017-06-27 18:09:20

Même sans cela, il semble fonctionner lorsque vous réduisez à moins de 786px, mais si vous réduisez à droite environ 786px que cela ne fonctionne pas la "recherche par" avec deux déroulant ne passant pas à la ligne suivante à ce moment. –

désolé, je comprends ... maintenant il fonctionne –

Merci l'homme! :-) –

affichage: bloc css ne fonctionne pas dans l'élément div?

Répondre

Questions connexes