Question

我现在在CSS中有点迷失。事情就是这样：

我有一个网站，其中包含许多具有不同高度的“webparts”（独立div容器），我希望这些webpart适合所有空白区域。这将很容易，但这里是抓住。我有三列，但如果用户分辨率小于1440px宽度，页面显示上下文只有两列。

    setIndicatif = function(element){
        var indicatif = $(element).find('option:selected').attr('indicatif') ; 
        $('#tel_struct').val('+('+indicatif+') '); 
    }
    setIndicatif($('#country'));

    $('#countrySelect').on('change', function() {
        setIndicatif(this);
    });

这是HTML：

  <!-- Country ------>	
    <select id="countrySelect" name="country" onchange="check()">
    	<?php
    		$reponse = $bdd->query('SELECT * FROM pays'); 
    		echo '<OPTION VALUE="" indicatif="">Pays</OPTION>';
    		while ($donnees = $reponse->fetch(PDO::FETCH_ASSOC))
    			{ 
    			echo '<OPTION VALUE="'.$donnees["id_pays"].'" INDICATIF="'.$donnees["code_pays"].'">'.$donnees["pays"].'</OPTION>';
    			} 
    	?>
    </select>

    <!--Telephone-->
    	<input type="tel" name="tel_struct" id="tel_struct" placeholder="Téléphone générique">

感谢您的想法。

看起来像：

now

我想要这样的事情：

wish

Answer 1

看看砌体布局：http://www.sitepoint.com/understanding-masonry-layout/

互联网上有很多东西可以找，但你可以在这里看看：http://designshack.net/articles/css/masonry/

Answer 2

列计数CSS属性描述了元素的列数。

初始值：自动

适用于：未替换的块元素（表元素除外），表格单元格或内联块元素

继承：否

媒体：视觉

计算值：已指定

动画：是，作为整数

规范顺序：由形式语法定义的唯一非模糊顺序

语法

column-count: 3;
column-count: auto;

解决方案

＆＃13;

#Container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
    padding:2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.floatdiv {
    border: 2px solid #bb8ed8;
    margin-bottom: 5%;
     background:#d77575;

}

＆＃13;

<div id="Container" class="cols">
    <div class="floatdiv">Some t ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, here</div>
    <div class="floatdiv">Some t ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, here</div>
    <div class="floatdiv">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="floatdiv">Some t ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, here</div>
    <div class="floatdiv">Some t ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, here</div>
    <div class="floatdiv">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It wasfloat:left; popularised in the 1960s with the releas</div>
</div>

＆＃13;

Div为“WebParts”定位

2 个答案:

语法

解决方案