Question

我正在尝试在框之间添加10px的边距并保留其预期的媒体查询值。但是当它被添加时，第三个框被推到第二行，我相信它会在框的宽度上添加更多的像素，但我不知道如何让它自动缩放。

* {
	box-sizing: border-box;
}

.titles {
	float:right;
	border-left: solid;
	border-bottom: solid;
	padding: 5px 10px 5px 10px;
}	

.borders {
	border-style: solid;
	float: left;
}

p {
	margin:15px;
	margin-top:35px;
} 

@media (min-width: 992px) {
	.p1 {
		width:33.33%;
	}
	.p2 {
		width:33.33%;
	}
	.p3 {
		width:33.33%;
	}
}

<html lang="zxx">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="module2.css">
    <title>Module2-Solution</title>
  </head>

  <body>

    <h1>Module 2 Assignment</h1>
    <div class="p1 borders">
      <div class="titles">One</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
    </div>

    <div class="p2 borders">
      <div class="titles">Two</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
    </div>

    <div class="p3 borders">
      <div class="titles">Three</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
    </div>

  </body>
</html>

Answer 1

使用flexbox，您将获得更好的灵活性：

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-wrap: wrap;
}

h1 {
  width: 100%;
}

.titles {
  float: right;
  border-left: solid;
  border-bottom: solid;
  padding: 5px 10px 5px 10px;
}

.borders {
  border-style: solid;
  flex-basis: 100%
}

p {
  margin: 15px;
  margin-top: 35px;
}

@media (min-width: 992px) {
  .borders {
    flex: 1;
    margin: 10px; /*I added margin to all of them but you can add to only one*/
  }
  h1 {
    margin:10px;
  }
}

<h1>Module 2 Assignment</h1>
  <div class="p1 borders">
    <div class="titles">One</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
  </div>

  <div class="p2 borders">
    <div class="titles">Two</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
  </div>

  <div class="p3 borders">
    <div class="titles">Three</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
  </div>

Answer 2

假设你想在宽屏幕上的盒子之间留出一些空间，你需要做的就是减少它们的宽度。

＆＃13;

* {
  box-sizing: border-box;
}

.titles {
  float: right;
  border-left: solid;
  border-bottom: solid;
  padding: 5px 10px 5px 10px;
}

.borders {
  border-style: solid;
  float: left;
}

p {
  margin: 15px;
  margin-top: 35px;
}

@media (min-width: 992px) {
  .p1 {
    width: calc(33.33% - 7px);
  }
  .p2 {
    width: calc(33.33% - 7px);
    margin: 0 10px;
  }
  .p3 {
    width: calc(33.33% - 7px);
  }
}

＆＃13;

<h1>Module 2 Assignment</h1>
<div class="p1 borders">
  <div class="titles">One</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>

<div class="p2 borders">
  <div class="titles">Two</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>

<div class="p3 borders">
  <div class="titles">Three</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>

＆＃13;

但可能是我误解了你的问题;如果是的话，请告诉我！

添加边距时，媒体查询的行为不符合预期

2 个答案: