Блог

Главная - Вопросы по программированию - Поместите div разной высоты в адаптивный родительский div, оптимизируйте и разрешите двойное содержимое

Поместите div разной высоты в адаптивный родительский div, оптимизируйте и разрешите двойное содержимое

#html #css

#HTML #css

Вопрос:

Может кто-нибудь помочь мне с оптимизацией этого кода? Я хотел бы иметь некоторый контроль над размещением. Masonry не выполняет эту работу таким образом.

Что я сделал сейчас, так это создал несколько наборов столбцов. Для разной ширины экрана один из наборов столбцов будет активным. На больших экранах 3 столбца, на средних экранах 2, а на маленьких экранах один столбец. Столбцы заполняются несколькими разделениями одинаковой ширины, но разной высоты.

В этом случае htlml загружает двойное содержимое, которое отключается css.

Может кто-нибудь помочь мне найти способ избежать двойного содержимого? Заранее спасибо!

На момент написания он используется [www.pcsupportaanhuis.nl ][1]

  #l_wrapper_topic_left {
    margin: 0;
    margin-right: 2%;
    padding: 0;
    width: 32%;
    float:left;
    overflow: auto;
    clear: both;
    display: inline;
    }
		
   #l_wrapper_topic_middle {
    margin: 0;
    margin-right: 2%;
    padding: 0;
    width: 32%;
    float:left;
    overflow: auto;
    display: inline;
   }
		
   #l_wrapper_topic_right {
    margin: 0;
    padding: 0;
    width: 32%;
    float: right;
    overflow: auto;
    display: inline;
  }
		
   #m_wrapper_topic_left {
    display: none;
  }
			
  #m_wrapper_topic_right {
    display: none;
  }
			
   #s_wrapper_topic {
    display: none;
  }
   
   .incolumn {
    margin-bottom: 4%;
  }

  @media only screen and (max-height: 480px) 
    and (max-width: 531px) and (orientation: landscape) {
    #m_wrapper_topic_left {
        margin: 0% 2% 0% 0%;
        padding: 0;
        width: 49%;
        float:left;
        overflow: auto;
        clear: both;
        display: inline;
      }		
		
         #m_wrapper_topic_right {
          margin: 0;
         padding: 0;
        width: 49%;
        float: right;
        overflow: auto;
        display: inline;
       }
		
       #l_wrapper_topic_left {
         display: none;
        }
			
       #l_wrapper_topic_middle {
        display: none;
       }
			
       #l_wrapper_topic_right {
        display: none;
	   }
			
      .incolumn {
        margin-bottom: 4%;
      }
   }  
 	<div id="l_wrapper_topic_left">
		
		<div class="cblock incolumn" >
			<?php include('topics/t1.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t4.php'); ?> 
		</div>

		</div>

	<div id="l_wrapper_topic_middle">
		<div class="cblock incolumn" >
			<?php include('topics/t2.php'); ?> 
		</div>
		

		</div>


	<div id="l_wrapper_topic_right">
		<div class="cblock incolumn" >
			<?php include('topics/t3.php'); ?> 
		</div>

	</div>

	<div id="m_wrapper_topic_left">
		
		<div class="cblock incolumn" >
			<?php include('topics/t1.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t3.php'); ?> 
		</div>
		<div class="cblock incolumn" >
			<?php include('topics/t4.php'); ?> 
		</div>
		
		
	</div>

	<div id="m_wrapper_topic_right">
		<div class="cblock incolumn" >
			<?php include('topics/t2.php'); ?> 
		</div>
		

		
	</div>

	<div id="s_wrapper_topic">
		<div class="cblock incolumn" >
			<?php include('topics/t1.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t2.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t3.php'); ?> 
		</div>
		
		<div class="cblock incolumn" >
			<?php include('topics/t4.php'); ?> 
		</div>
				
	</div>

Комментарии:

1. Насколько я понимаю, ваш код работает, и вы просто хотите сделать его лучше / быстрее / лаконичнее / и т.д. Такие вопросы, как правило, лучше подходят для обзора кода нашего дочернего сайта.

2. Спасибо. Я разместил на этом сайте!

3. похоже, вас может заинтересовать twitter bootstrap.