|
9楼
楼主 |
发表于 2019-2-26 21:19:31
|
只看该作者
本帖最后由 VimVim 于 2019-2-26 21:39 编辑
要的是这个效果吗?
下面的border纯粹是为了显示效果,你完全可以在css中将border设置删除。
HTML文件:- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- <link rel="stylesheet" type="text/css" href="test.css" />
- <div class="navtext">
- <span class="left">accident</span>
- <span class="right">accumulate</span>
- </div>
- <div class="mainbodyimg"><img src="test.png" /></div>
- </body>
- </html>
复制代码
CSS文件:
原理:
1、设置两个span,其宽度及padding合计为图片宽度,并设置每个span中的文本分别左右对齐;
2、将两个span都float left,这样左右两个span就会按顺序排列;
- /*左对齐*/
- .navtext .left {
- float: left;
- text-align: left;
- padding: 0 0 0 2em;
- width: 18em;
- border: 1px dotted black;
- }
- /*右对齐*/
- .navtext .right {
- float: left;
- text-align: right;
- padding: 0 2em 0 0;
- width: 18em;
- border: 1px dotted black;
- }
- /*图片*/
- .mainbodyimg img {
- width: 40em;
- border: 2px dotted black;
- }
复制代码
您可以用附件的测试文件多试试各种参数来满足个性化需求:
NavTextAlign.zip
(53.49 KB, 下载次数: 16)
|
|