display：block css不能在div元素中工作？

我建立了一些公司的品牌和幾個按鈕右側搜索欄和搜索欄是在中間。

我希望當我們減少到786px寬度（屏幕）時，然後搜索欄（從「搜索：」直到按鈕「Go！」）移到下一行。但我的代碼沒有按預期工作。哪裏不對？

預先感謝您！

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

來源

2017-06-27 rahul Kushwaha

768><放大或縮小嗎？ –

@SleekGeek減少。 –

然後在其他任何地方改變最小寬度：786px到最大寬度：768px。 –

添加clear:both財產......你ABC2元素fiddle

#abc2.qwert{ 
    clear:both; 
    }

來源

2017-06-27 18:09:20

即使沒有這個功能，它在縮小到遠低於786px時似乎也能正常工作，但如果你減少了大約786px，那麼它就不能正常工作。 –

對不起，我明白了......現在它正在工作 –

謝謝你！ :-) –

display：block css不能在div元素中工作？

回答

相關問題