div、css怎么实现内容的分栏，先把左侧排满，高度不够时排到第二列，请教高人~~

html-css021

div、css怎么实现内容的分栏，先把左侧排满，高度不够时排到第二列，请教高人~~,第1张

可以通过竖向排列的方式，将子div设置为行内块即可。话不多说了，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

div {border: solid 1px #000}

#main-div {

width: 200px

height: 300px

writing-mode: vertical-lr}

.item {

width: 100px

height: 50px

display: inline-block

background-color: antiquewhite

writing-mode: horizontal-tb}

</style>

</head>

<body>

<div id="main-div">

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

</div>

</body>

</html>

效果如下：

这都已经9年了，也就我想到了这个问题的答案，我简直就是个天才，哈哈哈

楼上的不懂就不要乱讲，iframe 不适合网站优化，因为frame里的内容百度谷歌等搜索引擎根本抓取不到；此外div可以设置高度和宽度。解决办法是：左右分栏，显然是一个div在左侧，一个div在右侧。左侧的div的css样式是：float：leftwidth70%右侧的div的css样式是：margin-left70%width:30%其他的你自己细微调一下。在这两个div下面，加上一个div清除左右侧浮动元素，比如，<div style="clear:both"></div>.就行了。