更改屏幕宽度时换行。引导程序

Question

Илья Бухов

Asked:2020-03-13 01:50:48 +0000 UTC2020-03-13 01:50:48 +0000 UTC 2020-03-13 01:50:48 +0000 UTC

网格项目传输不起作用

772

有一个基于 CSS-Grid 的布局。我试图在其中制作 4 个区域，而不是使用命名，而是使用行方向。因此，当显示尺寸发生变化时，这些块以正确的顺序相互移动。但显然出了点问题。而且我不明白是怎么回事，告诉我那些在网格中知道的人。

正常模式下的布局：

缩小显示中的计划布局：

下面的代码片段和这里的codepen

.gridtest {
  display: grid;
  grid-template-columns: 100px 500px 100px 500px;
  grid-template-rows: auto;
}

.h_icons {
  font-family: Source Sans Pro;
  position: relative;
  right: 90px;
  color: #226;
  font-size: 25px;
  outline: 2px;
  outline-offset: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 60px;
  margin-bottom: -30px;
}

.h_icons::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 110px;
  width: 450px;
  height: 2px;
  background-color: #226;
  right: 0px;
  margin: -3px;
  display block;
}

.icons {
  content: "\f1c0";
  font-family: FontAwesome;
  position: relative;
  text-align: center;
  top: calc(50% - 55px);
  color: #226;
  font-size: 60px;
  margin-top: 50px;
}

.text_icons {
  font-family: Source Sans Pro;
  text-align: justify;
  font-size: 17px;
  padding-left: 10px;
  padding-right: 70px;
  margin-top: 60px;
  margin-bottom: 0px;
  color: black;
}

@media (max-width: 575px) {
  .gridtest {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 'one one' 'two two' 'three three' 'four four';
  }
  .one {
    grid-column: 1 / 3;
    grid-row: 1 / 5;
  }
  .two {
    grid-column: 3 / 5;
    grid-row: 1 / 5;
  }
  .three {
    grid-column: 5 / 3;
    grid-row: 5 / 7;
  }
  .four {
    grid-column: 3 / 5;
    grid-row: 3 / 7;
  }
  .h_icons {
    font-family: Source Sans Pro;
    grid-row: 1
  }
  .h_icons::after {
    content: "";
    display: none;
  }
  .icons {
    font-family: Source Sans Pro;
    font-size: 30px;
    text-align: left;
  }
  .text_icons {
    font-family: Source Sans Pro;
    text-align: justify;
    margin-top: 0px;
    padding-right: 0px;
  }
}

<div class="GridTest">
  <div class="h_icons">
  </div>
  <div class="h_icons">
    <p>
      <h2>Услуги для современного бизнеса</h2>
    </p>
  </div>
  <div class="h_icons">
  </div>
  <div class="h_icons">
    <p>
      <h2>У задач есть решение</h2>
    </p>
  </div>
</div>

<div class="GridTest">
  <div class="icons">
    <i class="fas fa-users"></i>
  </div>
  <div class="text_icons">
    <p>Для тех, кому нужно объединить свои офисы в одну корпоративную виртуальную частную сеть (IP-VPN over Internet), где Интернет выступает в роли опорной сети.</p>
  </div>
  <div class="icons"><i class="fas fa-network-wired"></i>
  </div>
  <div class="text_icons">
    <p> Удаленный доступ (RDP, TeamViewer, служебные приложения типа клиент-сервер)</p>
  </div>
</div>

<div class="GridTest">
  <div class="icons"><i class="fas fa-helicopter"></i>
  </div>
  <div class="text_icons">
    <p>Для тех, кому нужна связь на удаленных рабочих местах (месторождения, места лесозаготовки, small office, рабочие места для учеников с ограниченными возможностями малокомплектных школ, фельдшерско-акушерские пункты и т.д.).</p>
  </div>
  <div class="icons">
    <i class="fas fa-cloud-upload-alt"></i>
  </div>
  <div class="text_icons">
    <p>Доступ к приложениям и услугам Интернет - государственным порталам, банкам, облачным приложениям и хранилищам, информационным и поисковым порталам, развлекательным ресурсам.</p>
  </div>
</div>

<div class="GridTest">
  <div class="icons"><i class="fas fa-globe"></i>
  </div>
  <div class="text_icons">
    <p>Для тех, кому нужен доступ к телекоммуникационным и информационным ресурсам.</p>
    <p class="gray">(более подробно см. <a target="_blank" href="https://www.sysat.ru/resheniya/">Решения</a>)
    </p>
  </div>
  <div class="icons"><i class="fas fa-sync"></i>
  </div>
  <div class="text_icons">
    <p>Обмен данными между пользователями через Интернет, включая электронную почту и электронный документооборот.</p>

  </div>
</div>
<div class="GridTest">
  <div class="h_icons">
  </div>
  <div class="h_icons">
    <p>
      <h2>Тарифы должны быть справедливыми</h2>
    </p>
  </div>
  <div class="h_icons">
  </div>
  <div class="h_icons">
    <p>
      <h2>Дополнительные возможности</h2>
    </p>
  </div>
</div>
<div class="GridTest">
  <div class="icons"><i class="fas fa-calculator"></i>
  </div>
  <div class="text_icons">
    <p>
      <b>СатисСвязь предлагает два типа тарификации:</b>
      <br>
      <br> - оплата за потребленный в течении месяца трафик — для тех, кто может и хочет контролировать расходы на трафик<br> - фиксированный ежемесячный платеж — для тех, кому важно планировать расходы
      <br>
      <br> Услуги включают в себя спутниковый интернет, видеонаблюдение, онлайн-трансляции, видео-конференц-связь, корпоративную спутниковую сеть связи и другое. Наши тарифы выгодны для передачи данных разного приоритета.
      <br>
      <br> Независимо от выбранной системы тарификации, вы сможете в полной мере использовать наши услуги. Если ваши задачи требуют более гибкого подхода, наши специалисты помогут разработать индивидуальное решение.

  </div>
  <div class="icons"><i class="fas fa-plus-square"></i>
  </div>
  <div class="text_icons">
    <p><b>Фильтрация трафика</b> подходит для тех, кто хочет уменьшить затраты на связь за счет снижения нагрузки на каналы связи непрофильным трафиком.
      <p class="gray">(более подробно см. <a target="_blank" href="/services/filtratsiya_trafika/">Фильтрация трафика</a>)</p>
      <p>
        <br>
        <b>Приоритизация трафика</b> подходит для заказчиков с повышенными требованиями к качеству передачи определенного типа данных (передача данных различного типа трафика в соответствии со своими приоритетами).
        <p class="gray">(более подробно см. <a target="_blank" href="/services/prioritizatsiya_trafika/">Приоритизация трафика</a>)</p>
        <br>
        <p><b>Аренда IP-адресов сети Интернет</b> подходит для тех, кому нужен доступ к серверам из Интернета (например, сервер видеонаблюдения, почтовый сервер, web-сервер и т.д.)</p>
        <br>
        <p><b>Детализация трафика</b> полезна для определения основных источников потребления трафика, например выявления и фильтрации паразитного трафика</p>
  </div>
</div>

1 个回答

Voted

NeedHate · Answer 1 · 2020-03-13T05:43:51Z

作为实现的示例：

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap");
* {
  box-sizing: border-box;
}

body {
  padding: 2rem;
  background-color: #F0F0C9;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  line-height: 1.15;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 3rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.1);
}
.wrapper article {
  padding: 1rem;
  background: #fff;
  box-shadow: 0 5px 50px -10px rgba(0, 0, 0, 0.1);
}
.wrapper article h2 {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  padding-bottom: .75rem;
  margin-bottom: 2rem;
}
.wrapper article hr {
  height: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
}
.wrapper article hr:last-child {
  /*dummy content*/
  margin-right: 60%;
}
.wrapper article hr.image {
  padding-bottom: 50%;
  width: 3rem;
}
.wrapper article .item {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: center;
          align-items: center;
  gap: 2rem;
}

<div class="wrapper">
	<article>
		<h2>Услуги для современного бизнеса</h2>
		<div class="item">
			<hr class="image">
			<div class="text">
				<hr><hr><hr><hr><hr><hr>
			</div>
		</div>
	</article>
	<article>
		<h2>У задач есть решения</h2>
		<div class="item">
			<hr class="image">
			<div class="text">
				<hr><hr><hr><hr><hr><hr>
			</div>
		</div>
	</article>
	<article>
		<h2>Тарифы должны быть справедливыми</h2>
		<div class="item">
			<hr class="image">
			<div class="text">
				<hr><hr><hr><hr><hr><hr>
			</div>
		</div>
	</article>
	<article>
		<h2>Дополнительные возможности</h2>
		<div class="item">
			<hr class="image">
			<div class="text">
				<hr><hr><hr><hr><hr><hr>
				<hr><hr><hr><hr><hr><hr>
			</div>
		</div>
	</article>
</div>

网格项目传输不起作用

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

网格项目传输不起作用

1 个回答

相关问题