H5如何实现图文一行分布且图片在左侧而文字在右侧

这几天总有人问我关于Web前端设计的作业怎么做呀,有什么代码可以实现啊。
我看了下作业内容,说是难点在于让图文在同一行且图片在左侧而文字在右侧且进行布局。
在这里插入图片描述
看完作业内容后我想说的是:“有问题能尽量百度就百度,别问这么基础的问题啊洗吧!

关于如何实现图文在一行分布且图片在左侧而文字在右侧

萌新写代码

<table border="0">
<tr>
	<td rowspan ="2">
	<img src="图片.jpg" height="250" width="250"/></td><td>
<ul>
	<li>一口价:45.00</li>
	<li>剩余时间:323小时</li>
	<li>本期售出:8</li>
	<li>累计售出:24</li>
	<li>宝贝类型:全新</li>
	<li>所在地:北京海淀区</li>
	<li>宝贝数量:3</li>
	<li>浏览量:15</li>
</ul>
</td>
<tr>
<td><img src="2-2.jpg"/></td>
</tr>
</table>

这一段是通过表格的跨行(跨列)操作实现<td rowspan="value">
表格单元横跨两行:<td rowspan="2">;
这个属性的属性值不能为0(所有浏览器都不支持)
以下就是上面的代码实现的样子:
在这里插入图片描述
由代码行

<td rowspan ="2">
	<img src="2.jpg" height="250" width="250"/>
</td>

我们可以知道开始标签<td>和结束标签</td>之中有<img src="2.jpg" height="250" width="250"/>
这是在表格中插入图片了,而<td>的属性是rowspan,也就是跨越的行数。
注意:这里说的是一个图片占据两个行,不是真的将两个行合在一块了。
换句话说,这里可以看成有三个单元格的表格,但其中一个单元格的两行都被图片占据了

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元

td使一个表格分成三个表格单元,tr使表格分成两行,其中一个图片占据两行,另两个个占据一行。
不要问我为啥表格会因为三个td定义表格单元代码分成左边一个大的右边两小部分
因为这里是表格,定义表格单元代码时都是默认向左右增加删减表格单元,代码中已经定义第一个表格单元跨行2个,第二个在第一行,第三个被定义为第二行,但因为第一个表格单元定义跨行两行,所以放在右边
如下图才是正常三个单元表格现象,如果第一个单元格占据两行且定义在第一行时候,则第3单元格会移到右边。
在这里插入图片描述
跨行的情况如二图:

在这里插入图片描述
重点提醒:这里如果你没有定义过列有多少个,则在分割两个以上单元格时候,列数都默认为向左右增加,也就是说如果我是五个单元格,但没有定义行列的数量,则列数有五个行数有一个

好了,以上就是解决方案,供给我同学解答。

发布了9 篇原创文章 · 获赞 18 · 访问量 1578

猜你喜欢

转载自blog.csdn.net/weixin_45677047/article/details/104416031