Расстановка блоков с помощью css

277

29 января 2018, 05:02

Нужно отодвинуть 3-й div, как на рисунке, но у меня почему-то не срабатывает nth-child, что я делаю не так?

.apply__items{ 
	width: 180px; 
	text-align: center; 
	color: #2f383b; 
	float: left; 
	margin-right: 150px; 
} 
 
.apply__items:nth-child(2) { 
	margin-left: 43px; 
} 
 
.apply__items:nth-child(3) { 
	margin-right: 50px; 
} 
 
.apply__digit{ 
	height: 80px; 
	width: 80px; 
	line-height: 80px; 
	border-radius: 50%; 
	border: 1px solid #2f383b; 
	font-family: 'Tahoma', sans-serif; 
	font-size: 30px; 
	font-weight: 400px; 
	color: #2f383b; 
} 
 
.apply__digit:hover{ 
	border: none; 
	background: #2f383b; 
	color: #fff; 
} 
 
.apply__item{ 
	margin-top: 14px; 
	font-size: 16px; 
	font-family: 'Tahoma', sans-serif; 
	font-weight: bold; 
	color: #2f383b; 
}

<div class="apply__items"> 
   <div class="apply__digit">1</div> 
   <div class="apply__item">Лучший код</div> 
</div> 
<div class="apply__items"> 
   <div class="apply__digit">2</div> 
   <div class="apply__item">Лучший код</div> 
</div> 
<div class="apply__items"> 
   <div class="apply__digit">3</div> 
   <div class="apply__item">Лучший код</div> 
</div>

Answer 1

То, что вы прописали - работает, работает именно так, как вы прописали. И чтобы получить такую картинку таким способом, нужно знать на какую ширину вы ее делаете. То есть работать это будет только для фиксированной ширины. Чтобы добиться такого разряженного заполнения адаптивно можно воспользоваться флексбоксом:

.wrapper { 
  display: flex; 
  justify-content: space-between; 
} 
 
.apply__items { 
  width: 180px; 
  text-align: center; 
  color: #2f383b; 
} 
 
.apply__digit { 
  margin:auto; 
  height: 80px; 
  width: 80px; 
  line-height: 80px; 
  border-radius: 50%; 
  border: 1px solid #2f383b; 
  font-family: 'Tahoma', sans-serif; 
  font-size: 30px; 
  font-weight: 400px; 
  color: #2f383b; 
} 
 
.apply__digit:hover { 
  border: none; 
  background: #2f383b; 
  color: #fff; 
} 
 
.apply__item { 
  margin-top: 14px; 
  font-size: 16px; 
  font-family: 'Tahoma', sans-serif; 
  font-weight: bold; 
  color: #2f383b; 
}

<div class="wrapper"> 
  <div class="apply__items"> 
    <div class="apply__digit">1</div> 
    <div class="apply__item">Лучший код</div> 
  </div> 
  <div class="apply__items"> 
    <div class="apply__digit">2</div> 
    <div class="apply__item">Лучший код</div> 
  </div> 
  <div class="apply__items"> 
    <div class="apply__digit">3</div> 
    <div class="apply__item">Лучший код</div> 
  </div> 
</div>

Answer 2

.apply__items:nth-child(3) {
    margin-right: 50px;
}

Вы делаете все хорошо, только ширина бровсера маленькая:
Я меняю ширину в JSFiddle:

Answer 3

.wrapper { 
  display: flex; 
  flex-direction: row; 
} 
 
.apply__items { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  color: #2f383b; 
} 
 
.apply__items:nth-child(2) { 
  border-left: red solid; 
  border-right: red solid; 
  flex-grow: 2; 
} 
 
.apply__digit { 
  height: 80px; 
  width: 80px; 
  line-height: 80px; 
  border-radius: 50%; 
  border: 1px solid #2f383b; 
  font-family: 'Tahoma', sans-serif; 
  font-size: 30px; 
  font-weight: 400px; 
  color: #2f383b; 
} 
 
.apply__digit:hover { 
  border: none; 
  background: #2f383b; 
  color: #fff; 
} 
 
.apply__item { 
  margin-top: 14px; 
  font-size: 16px; 
  font-family: 'Tahoma', sans-serif; 
  font-weight: bold; 
  color: #2f383b; 
}

<div class="wrapper"> 
  <div class="apply__items"> 
    <div class="apply__digit">1</div> 
    <div class="apply__item">Лучший код</div> 
  </div> 
  <div class="apply__items"> 
    <div class="apply__digit">2</div> 
    <div class="apply__item">Лучший код</div> 
  </div> 
  <div class="apply__items"> 
    <div class="apply__digit">3</div> 
    <div class="apply__item">Лучший код</div> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нарисовать кривую на CSS?

Подскажите, пожалуйста способ "нарисовать" на чистом CSS максимально похожую кривую с заокругленными угламиЯ пробовал через border-radius и обрезать...

287

MySQL

создание групповой хранимой функции mysql

Вечер добрыйРодился у меня такой вопрос:

251

MySQL

Как одним запросом взять информацию из нескольких таблиц? MySQL

Всем привет! Подскажите как одним запросом взять всю информацию о пользователеЯ использовал такой запрос:

250

DrawingVisual в фоновом потоке С# WPF 3.5

В фоновом потоке формирую матрицу случайными числами:

302