我正在寻找一种方法来设置一个基本的 2 列博客类型布局,它允许 div 水平内联,但也可以直接位于上面的 div 之下。我试过 display:inline 和 float div,仍然不能让它正常工作。我不确定这是否可以单独使用 CSS 来完成,但希望如此
请检查下面的链接以了解我的意思,因为我很确定我没有以最好的方式解释它。
我想做的事情:
我不断得到的:
<div style="display:inline-block; width:400px;">
<div style="padding:5px; margin:10px; background:#222;">
<div class="small">date | name</div>
<div class="data">blah blah blah</div>
</div></div>
使用上面的代码,div 可以很好地并排放置,但我从数据库中提取数据,因此每个 div 将具有不同的高度
最佳答案
这个东西有效:
HTML:
<div class="container">
<div class="left-aside">
<div class="block one">ONE</div>
<div class="block two">TWO</div>
<div class="block three">THREE</div>
</div>
<div class="right-aside">
<div class="block one">ONE</div>
<div class="block two">TWO</div>
<div class="block three">THREE</div>
</div>
</div>
CSS:
.block {
margin: 5px;
background-color: #22CCFF;
}
.left-aside,
.right-aside {
width: 50%;
}
.left-aside {
float: left;
}
.right-aside {
float: right;
}
.left-aside .one {
height: 200px;
}
.right-aside .one {
height: 250px;
}
.left-aside .two {
height: 300px;
}
.right-aside .two {
height: 200px;
}
.left-aside .three {
height: 300px;
}
.right-aside .three {
height: 150px;
}
关于javascript - 水平和垂直对齐 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19947218/