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

html-css037

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>

/*好久没写生疏了 */

css图文混排的关键核心的是文字与图片能否合适的去组合在一起。

图片与文字的排版比例要遵循黄金分割原理1：0.618黄金分割比是我们很早的时候就有学习到的，这也是目前在世界范围内都公认的最好构图比例，黄金分割率的页面比例可以给人带来视觉上的美感。这个是css图文混排的关键核心。

图文混排是版式设计中最常见的情况，图片与文字在传达版面信息上具有不同的特点，图片在视觉传达上可以辅助文字。