@420adams
Начинающий веб разработчик

Как сделать блоки в ряд?

Хочу сделать в ряд эти 2 блока, картину и аккардеон, ни как не получилось
на картинах увидите разметку, стили и макет 5b85576bcb1f4362456366.png
<div class="half">
  
  <div class="humanbg">
 
       <img src="images/wwd-humanpic.png" alt="">

    </div>
    <div class="tab blue">
   
   <input id="tab-four" type="radio" name="tabs2">
  
    <label for="tab-four">Photography</label>
  
    <div class="tab-content">
     
   <p>eacere dolorum adipisci eum? Saepe, itaque.</p>
  
    </div>
    </div>
    <div class="tab blue">
    
  <input id="tab-five" type="radio" name="tabs2">
    
  <label for="tab-five">Creativity</label>
  
    <div class="tab-content">
    
    <p> pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
   
   </div>
 
   </div>
 
   <div class="tab blue">
   
   <input id="tab-six" type="radio" name="tabs2">
    
  <label for="tab-six">Web Design</label>
    
  <div class="tab-content">
       
 <p>Lorem soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
  
    </div>
  
  </div>
 
 </div>

</div>


.half { 
	display: inline-flex;
 
	width: 50%;
  
	max-width: 650px;
   
	padding: 0 1em;
    
	margin-top: 100px;
  }

 
 

.humanbg {
 
	   display: flex;
     
	   flex-direction: row;
      
	   width: 100%;
    
	   max-width: 480px;
  }


  /* Acordeon styles */
 
 .tab {
   
	display: flex;

	flex-direction: column;
    
	position: relative;
    
	margin-bottom: 1px;
    
	width: 100%;
    color: #fff;
    
	overflow: hidden;
  }
 
 .tab input {
    
		position: absolute;
    
		opacity: 0;
    
		z-index: -1;
 
 }
  

.tab label {
    
		position: relative;
    
		display: block;
   
		padding: 0 0 0 1em;
    
		background: #ffffff;
    
		border: 1px solid;
    
		border-color: #adadad;
    
		font-weight: bold;
    
		line-height: 3;
    	
		cursor: pointer;
    
		color: #000000;
  }
 
 .blue label {
    
		background: #ffffff;
  
}
  	

.tab-content {
    
		max-height: 0;
    
		overflow: hidden;
    
		background: #ffffff;
    
		-webkit-transition: max-height .35s;
    
		-o-transition: max-height .35s;
    
		transition: max-height .35s;
  
}

 
 .tab-content p {
      
	color: #b9b9b9;
  
}
 
 .blue .tab-content {
    
	background: #ffffff;
  
}
 
 .tab-content p {
    
	margin: 1em;
  
}
  /* :checked */
  
.tab input:checked ~ .tab-content {

    	max-height: 100vh;
  
}
  /* Icon */
 
 .tab label::after {
    
	position: absolute;
    
	right: 0;
    
	top: 0;
    
	display: block;
    
	width: 3em;
    
	height: 3em;
    
	line-height: 3;
    
	text-align: center;
    
	-webkit-transition: all .35s;
    
	-o-transition: all .35s;
    
	transition: all .35s;
 
 }

  .tab input[type=radio] + label::after {
 
   content: "\25BC";
  
}
  
.tab input[type=checkbox]:checked + label::after {
    
transform: rotate(315deg);

  }

  .tab input[type=radio]:checked + label::after {

    transform: rotateX(180deg);
 
 }
  • Вопрос задан
  • 220 просмотров
Пригласить эксперта
Ответы на вопрос 2
@420adams Автор вопроса
Начинающий веб разработчик
Eugene Chefranov Получается что надо везде прописать флекс?
Я новичок, пытаюсь разобраться, но одному сложно, поэтому вот задаю вопросы
Ответ написан
Chefranov
@Chefranov
Новичок
В вашей предыдущей теме вы сами написали, что вам надо создать контейнер с свойством флекс внутрь которого засунуть два дива - один для фото, а другой для аккордеона

P.S. в классе .half у вас свойство inline-block и align-items, второе свойство работать не будет, так как относится к флексам которых у вас нет.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы