медиа-запрос не работает должным образом при добавлении поля - PullRequest
Новая
       10

медиа-запрос не работает должным образом при добавлении поля

0 голосов
/ 12 мая 2018

Я пытаюсь добавить 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>

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Предполагая, что вам нужно пространство между полями на широком экране, все, что вам нужно сделать, это немного уменьшить их ширину. 

* {
  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);
  }
}
<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>

Но, может быть, я неправильно понимаю ваш вопрос; если так, дайте мне знать!

0 голосов
/ 12 мая 2018

Используйте 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>
...