设置第二行向第一行右浮动,div+css实现一行两列

设置第二行向第一行右浮动,div+css实现一行两列,第1张

不知道这个合不合要求。
<style>
#container{
width: 404px; / #container div border占了1px /
}
#container div{
float:left;
width:200px;
border:1px solid #ABC;
}
</style>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>

现在clear:both所指的是<P>标签,包含img和文字,整个<p>clear:both对里面的内容排列是没有影响的。
如果希望文字另起一行,需要将所有的文字用<p></p>标签包围,并设置clear:both属性。
不过不知道你设置 img#p2 的position:absolute是想干嘛~
如:
<HTML>
<HEAD>
<TITLE>明月几时有</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
imgp1{float:left;margin-right:08em;
margin-bottom:05em
}
img#p2{position:absolute;top:250px;left:200px
}
p{font-size=20px;font-style:italic;text-indent:30px;clear:both;
line-height:14em
}
body{ background-color:lightyellow}
-->
</STYLE>
</HEAD>
<body>
<img src="tu2jpg" class="p1" width="250" alt="">
<P>
明月几时有,把<br>
酒问青天,不知天上<br>
宫阕,今夕是何年?<br>
我欲乘风归去,唯恐<br>
琼楼玉宇,高处不胜<br>
寒,起舞弄清影,何<br>
似在人间?<br>
</P>
<img src="tu3jpg" id="p2" width="250" alt="">
<p>
转朱阁,低绮<br>
户,照无眠。不应有<br>
恨,何事长向别时<br>
圆?人有悲欢离合,<br>
月有阴晴圆缺,此事<br>
古难全但愿人长<br>
久,千里共婵娟。<br>
</p>
</BODY>
</HTML>

因为不同浏览器对于CSS的支持不同,所以网页设计师往往在兼容浏览器方面下些功夫,费点时间,至于你的串到下一行,一般都是因为你两行的宽度超过他们所在容器的宽度所以自动下移一行,你可以根据情况,将上方的容器宽度减小1或2像素,试试


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13322581.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-14
下一篇 2023-07-14

发表评论

登录后才能评论

评论列表(0条)

保存