Html 如何让我的div在保存内容不同的情况下保留空间

我正在一个网站上工作，在那里我必须制作一个网格状的系统，允许所有的

div.cons

间隔相同，即使它们的高度不同

这是我正在使用的当前代码（）：

html，正文{
位置：相对位置；
}
html{
背景色：#FFF；
}
* {
保证金：0；
填充：0；
字体系列：'opensans'，Sans serif；
字体大小：400；
颜色：#333；
}
p、 a、h1、h2、h3、h4、h5、h6、li、td、th、div、img{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
p、 h1、h2、h3、h4、h5、h6、li、td、th、div、img{
游标：默认值；
}
p、 a、李、td、th、div{
字体大小：12px；
}
分区导航>ul li>p，
分区导航>ul li>a，
a{
字体家族：继承；
字体大小：继承；
字体大小：继承；
文字装饰：无；
颜色：继承；
}
分区包装器{
宽度：510px；
最小高度：200px；
高度：自动；
溢出：自动；
位置：相对位置；
保证金：自动；
}
div.wrapper>div.con{
宽度：250px；
高度：自动；
溢出：自动；
位置：相对位置；
浮动：左；
边缘顶部：10px；
}
div.wrapper>div.con.odd{
右边距：10px；
}
div.wrapper>div.con>h1.title，
div.wrapper>div.con>p.content{
显示：块；
填充物：5px10px；
}
div.wrapper>div.con>h1.title{
边缘底部：20px；
背景色：#000；
字号：700；
字体大小：14px；
文本转换：大写；
颜色：#FFF；
}
div.wrapper>div.con>p.content{
字体大小：12px；
文本对齐：居中；
}
div.wrapper>div.con>div.opt{
高度：自动；
溢出：自动；
边缘顶部：20px；
背景色：#000；
}
div.wrapper>div.con>div.opt>ul{
高度：自动；
溢出：自动；
列表样式类型：无；
}
div.wrapper>div.con>div.opt>ul>li{
显示：内联块；
字号：700；
字体大小：10px；
文本转换：大写；
颜色：#FFF；
}
div.wrapper>div.con>div.opt>ul>li>a{
显示：块；
填充物：2px 5px；
}
div.wrapper>div.con>div.opt>ul>li>a:悬停{
颜色：rgba（255255,0.75）；
}

我的名字是空的。南。

前庭，特别是饮食，最后的按摩，最后的伤口。直径前叶，妊娠前叶，枕叶。Nam nunc lorem，cursus eget nisl in，pretium aliquet libero。这是我的朋友。





我的名字是空的。南。

埃尼安·康瓦利斯（Aenean convallis）、猫咪（felis ac luctus dictum）、尼西·康瓦利斯（nisi risus convallis enim）、调味品（ac quam mi ac dui）。虎口浮雕和肘部浮雕同侧前庭；酒后驾车。





我的名字是空的。南。

suscipit sem的Ut。莫里斯·奎斯·索利西图丁·埃尼姆。这是一个前庭皮肤按摩。莫利斯胡拉姆科珀大黄蜂。库拉比图尔欧盟发酵罐。前庭位于阴沟水平外阴部。利奥·莱克托斯，普乌特·波苏尔。





这是一个很好的例子，一个孕妇。

智者无智者。在est dapibus，scelerisque purus被杀。

请看小提琴。我已经向包装器div添加了一些CSS3属性

---

尝试拆分为两列，并将div的内部保持如下状态：

HTML:

---

我用

class=“col”

添加了2个

div

列。看这个

您还需要使用所有的

符号来解释css中继承权中的新div

CSS

div.wrapper {
    width: 520px;
    ...
}

div.wrapper > div.col {
    display: inline-block;
    width: 250px;
    vertical-align: top;
}

div.wrapper > div.col.odd {
    margin-right: 10px;
}

HTML

<div class="wrapper">
    <div class="col odd">
        <div class="con">
            ...
        </div>
        <div class="con">
            ...
        </div>
    </div>
    <div class="col">
        <div class="con">
            ...
        </div>
        <div class="con">
            ...
        </div>
    </div>
</div>

...
...
...
...

在

div.wrapper

上使用

display:flex

，并添加一个

填充底部：20px

div.wrapper {
    width:510px;
    min-height:200px;
    height:auto;
    overflow:auto;
    position:relative;
    margin:auto auto;
    display:flex;
    flex-wrap: wrap;
}

现在将
位置：绝对
和
底部：0px
添加到
div.opt

div.wrapper > div.con > div.opt {
    width:100%;
    height:auto;
    overflow:auto;
    /*margin-top:20px;*/
    position:absolute;
    bottom:0px;
    background-color:#000;
}


您是否正在尝试创建类似于Pinterest的砌体样式布局？如果是这样的话，我会告诉你怎么做

演示标记如下所示：

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
   <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
   <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

然后需要将此样式应用于每个子级：

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

本教程还提供了一个链接，指向旧浏览器的

这就是创建砖石风格布局所需的全部内容：）
@susheel-“即使它们的高度不同。”@susheel-我希望只使用css修复。停止尝试启动参数…使用表。这就是它们的用途。@gaynorvader-非常确定一个表也会有同样的问题。一个快速的解决方案可能是并排使用2列
div
s，然后交替填充。很好的尝试。OP布局的问题（除了多个H1标记和如此多的直系后代规则，这使得布局很难修改）是它们实际上需要将“div.con.odd>p.content”容器的高度与下一个si容器的高度匹配
div.wrapper > div.con > div.opt {
    width:100%;
    height:auto;
    overflow:auto;
    /*margin-top:20px;*/
    position:absolute;
    bottom:0px;
    background-color:#000;
}

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
   <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
   <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}