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

223
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>

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

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

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

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

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

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

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

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

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

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

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

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

 253