html中求图文左右排版的css写法

html-css020

html中求图文左右排版的css写法,第1张

<html>

<head>

<meta charset="utf-8">

<title>图文混排</title>

<style>

/*左右排版*/

.clearfix{clear: both}

.column{width: 30%position: absolutebackground-color:blue}

.tukuang{broder:1px black solid}

.tukuang img{float: leftwidth: calc(100% / 2 - 10px)margin:5pxborder-radius: 10%position: relative}

.img{width: 50%position: relativebackground-color:black}

.text{float: rightwidth: calc(50% - 10px)background-color:redposition: absolutetop:5pxright:5px}

</style>

</head>

<body>

<div class="column">

<div class="img">

<div class="tukuang">

<img src="images/m1.jpg">

</div>

<div class="tukuang">

<img src="images/m2.jpg">

</div>

<div class="tukuang">

<img src="images/m3.jpg">

</div>

<div class="tukuang">

<img src="images/m4.jpg">

</div>

</div>

<div class="text">

文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域

文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域

</div>

<div class="clearfix"></div>

</div>

</body>

</html>

/*好久没写生疏了 */

是你没有设置好，任何标签的100%是相对于父亲节点而言的，如果你连父亲节点都不确定是多高的话，那你当前节点设置成100%是没有意义的。

因此，你看一下你的代码，把它所有的长辈节点设置为height:100%

众所周知，所有网页的根节点是html，然后是body,因此这两个节点是一定要设置为100%的。

另外如果你用的是asp.net，很可能还会有一个form节点，这个节点也是要设置为100%的

因此，body,html,form{height:100%}，如果你的排版节点直接放在body下面，这样写就可以实现你要的效果了

ul{

    overflow:hidden

    *zoom:1

}

li{

    float: left

    width: 49.99%

    height: 20px

    overflow: hidden

}