Question

我在理解css响应设计方面遇到了很多麻烦......我一直在搜索和观看视频，但我仍然不完全理解这样做的方式。

这是我的代码：

<!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没有响应，变小？

Answer 1

如果您定义了固定值（例如width上的900px），则.wrapper属性不会变小。您可以将其更改为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;
}

Answer 2

您可以使用bootstrap 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>

div不会对浏览做出回应

2 个答案: