div不會響應瀏覽

我在理解css響應式設計方面遇到了很多麻煩......我一直在搜索和觀看視頻，但仍然沒有完全理解這樣做的方式。div不會響應瀏覽

這是我的代碼：

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <style> 
     h1 { 
      text-align: center; 
     } 
     .wrapper { 
      width: 900px; 
      margin: 0 auto; 
      background: red; 
     } 
     .city { 
      float: left; 
      margin: 5px; 
      padding: 10px; 
      width: 20%; 
      height: 300px; 
      border: 1px solid black; 
      background-color: orange; 
     } 
    </style> 
</head> 

<body> 

    <h1>Asaf</h1> 
    <h2>Asaf</h2> 
    <br> 
    <div class="wrapper"> 
     <div class="city"> 
      <h2>London</h2> 
      <p>London is the capital city of England.</p> 
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
     </div> 

     <div class="city"> 
      <h2>Paris</h2> 
      <p>Paris is the capital and most populous city of France.</p> 
     </div> 

     <div class="city"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> 
     </div> 
     <div class="city"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> 
     </div> 
     <div class="city"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> 
     </div> 
     <div class="city"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> 
     </div> 
    </div> 

</body> 

</html>

爲什麼是div不響應，並獲得更小的？

來源

2015-02-09 Gsa

也文本是失控的div和越來越複雜了.. – Gsa 2015-02-09 01:36:27

你的width如果你定義了一個固定的值，你的房產不能變小（在你的情況下你的的900px）。您可以將其更改爲100%，因此您的包裝將始終調整爲適合100％。

.wrapper { 
    width:100%; 
    max-width: 900px; /* if you prefer the 900px to be the max width for your content */ 
    margin:0 auto; 
    background:red; 
}

來源

2015-02-09 01:36:48

似乎固定的一個問題，但我如何得到與瀏覽器越來越小更小的div？還有它的文字，我也希望divs在中間 – Gsa 2015-02-09 01:43:08

你可以使用'@ media'查詢並在CSS中定義一些屏幕寬度斷點。 – 2015-02-09 01:45:36

我怎樣才能讓它沒有@media？ – Gsa 2015-02-09 01:55:47

您可以使用引導CSS來實現您的要求。它的工作原理。試試這個代碼..

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>Asaf Example</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
<style> 
    h1 { 
    text-align:center; 
    } 
    .wrapper { 
    width:100%; 
    max-width: 900px; /* if you prefer the 900px to be the max width for your content */ 
    margin:0 auto; 
    background:red; 
    } 
    .city { 
    float: left; 
    margin: 5px; 
    padding: 10px; 
    width: 100%; 
    height: 300px; 
    border: 1px solid black; 
    background-color:orange; 
} 
    </style> 

    </head> 

<body> 

<h1>Asaf</h1> 
<h2>Asaf</h2> 
<br> 
<div class= "container"> 
    <div class="row"> 

    <div class="col-sm-3 col-xs-6"> 
     <div class="city"> 
     <h2>London</h2> 
     <p>London is the capital city of England.</p> 
     <p>It is the most populous city in the United Kingdom, 
      with a metropolitan area of over 13 million inhabitants.</p> 
     </div> 
    </div> 

    <div class= "col-sm-3 col-xs-6"> <!-- sm= small devices and xs= extra small devices. --> 
     <div class="city"> 
      <h2>Paris</h2> 
      <p>Paris is the capital and most populous city of France.</p> 
     </div> 
    </div> 

    <div class= "col-sm-3 col-xs-6"> 
     <div class="city"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, 
      and the most populous metropolitan area in the world.</p> 
     </div> 
    </div> 

    <div class= "col-sm-3 col-xs-6"> 
     <div class="city"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, 
       and the most populous metropolitan area in the world.</p> 
      </div> 
     </div> 
    </div> 

    </div> <!-- end of row --> 
</div> <!-- end of container --> 

    </body> 
    </html>

來源

2015-02-09 02:06:04 Akilsree1

雅，但與引導我有點依賴於外部來源等..，但你做了什麼，我的意思是...，告訴我這個網站是建立bootstrap？ hosen.co.il？ – Gsa 2015-02-09 02:08:38

div不會響應瀏覽

回答

相關問題