Question

我在下方蓝色部分的顶部应用了一个边距，但它似乎没有显示。它似乎正好在屏幕的左侧，任何想法如何解决？

问题显示何时应用CSS Sheet 2

HTML代码：

<html>
<header>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="responsive.css" 
     media="screen and (max-width:900px)">
</header>

<body>

<div class="m1">
    <p>My content</p>
</div>

<div class="m2">
    <p>My content</p>
</div>

<div class="m3">
    <p>My content</p>
</div>


</body>

CSS Sheet 1

body {
    width:1000px;
    margin:20px auto;
    max-width:100vw;
}

.m1 {
    background-color:red;
    width:30%;
    height:500px;
    float:left;
    margin: 0 2.5% 0 2.5%;
}

.m2 {
    background-color:yellow;
    width:30%;
    height:500px;
    float:left;
    margin-right:2.5%;
}

.m3 {
    background-color:blue;
    width:30%;
    height:500px;
    float:left;
    margin-right:2.5%;
}

CSS表2

body {

}

.m1 {
    width:42.5%;
}

.m2 {
    width:42.5%;
}

.m3 {
    clear:both;
    float:none;
    width:85%;
    margin:20px 0 0 0;
}

Answer 1

Flex方法。

根据您的要求调整margin。

body {
  width: 100vw;
  margin: 0;
  background: grey;
  display: flex;
  flex-wrap: wrap;
}

.m1 {
  width: calc(50vw - 60px);
  background: red;
  height: 500px;
  margin: 30px;
}

.m2 {
  width: calc(50vw - 60px);
  background: green;
  height: 500px;
  margin: 30px;
}

.m3 {
  height: 500px;
  background: blue;
  width: calc(100vw - 60px);
  margin: 0 30px 30px 30px;
}

<body>
  <div class="m1">
    <p>My content</p>
  </div>
  <div class="m2">
    <p>My content</p>
  </div>
  <div class="m3">
    <p>My content</p>
  </div>
</body>

Answer 2

这是因为您尚未清除您为float和.m1选择器申请的.m2。尝试添加div以清除m1和m2以下。试试这段代码。

<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="responsive.css" media="screen and (max-width:900px)">
  </head>

  <body>

    <div class="m1">
      <p>My content</p>
    </div>

    <div class="m2">
      <p>My content</p>
    </div>
    <div class="clear">
    </div>

    <div class="m3">
      <p>My content</p>
    </div>
</body>

body {
  width: 1000px;
  margin: 20px auto;
  max-width: 100vw;
}

.m1 {
  background-color: red;
  width: 30%;
  height: 500px;
  float: left;
  margin: 0 2.5% 0 2.5%;
}

.m2 {
  background-color: yellow;
  width: 30%;
  height: 500px;
  float: left;
  margin-right: 2.5%;
}

.m3 {
  background-color: blue;
  width: 30%;
  height: 500px;
  float: left;
  margin-right: 2.5%;
}

body {}

.m1 {
  width: 42.5%;
}

.m2 {
  width: 42.5%;
}

.m3 {
  clear: both;
  float: none;
  width: 85%;
  margin: 20px 0 0 0;
}

.clear {
  clear: both;
}

Answer 3

您在m1上使用速记属性但未在m3上使用

.m3 {
    background-color:blue;
    width:30%;
    height:500px;
    float:left;
    margin: 20px 2.5% 0 2.5%;
}

这是更新的jsfiddle https://jsfiddle.net/758rrLua/

Answer 4

从float: none; CSS表2中删除.m3。

保证金未在CSS中应用

4 个答案: