css 怎么让两个图左右排列

html-css09

css 怎么让两个图左右排列,第1张

如果你的是<div><img src="img.jpg"</div><div><img src="img.jpg" /></div>

那以把DIV改成SPAN就可以了

也就是改成<span><img src="img.jpg"</span><span><img src="img.jpg" /></span>

ul{list-style:nonewidth:200pxoverflow:hidden}

li{width:100pxfloat:left} <ul>

    <li>1</li>

    <li>6</li>

    <li>2</li>

    <li>7</li>

    <li>3</li>

    <li>8</li>

    <li>4</li>

    <li>9</li>

    <li>5</li>

    <li>10</li>

</ul>

要不然用2个ul设为float也可以

<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>

/*好久没写生疏了 */