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不会响应浏览

回答

相关问题