TA的每日心情 | 奋斗 2019-10-13 07:34 |
---|
签到天数: 209 天 [LV.7]常住居民III
|
楼主 |
发表于 2019-2-26 21:19:31
|
显示全部楼层
本帖最后由 VimVim 于 2019-2-26 21:39 编辑
7 I/ n3 r0 b3 P喬治兄 发表于 2019-2-26 14:15( T }+ @9 |# k! s; y# M
VimVim 兄:" B) j3 n) ^9 E; x- H
請教一個排版的問題2 N1 X% F. l3 p3 U/ H3 _/ Q# @
小弟想把辭典的每頁首字和尾字置於同一列的左右兩端 " Z* E: t) N. T. P
要的是这个效果吗?
+ z% B5 h4 t2 T, r$ i下面的border纯粹是为了显示效果,你完全可以在css中将border设置删除。' _# U0 N( Z, Z1 z* n
9 ]6 k, Y1 \+ p; {2 @3 r/ x
- [4 D0 i2 X8 Z0 v8 N+ H' t5 b: wHTML文件:- <!DOCTYPE html>. m9 J9 ?+ s$ P
- <html xmlns="http://www.w3.org/1999/xhtml">9 j1 X- U& q7 R1 l" }: S5 n
- <head>
) k/ `7 t! f! G" A5 ^0 u* F - <title></title>) r: _4 x; S+ X- D* I3 R4 M) B( d
- </head>
) T) {: n0 \+ |: k, N$ f - <body>
- f% t4 T% c3 M - <link rel="stylesheet" type="text/css" href="test.css" />
% O' r7 |% F0 T" _4 u - <div class="navtext">0 F. _5 L) ?9 }4 I8 E! ^2 f
- <span class="left">accident</span>
# _; k: h8 n7 H4 l4 d - <span class="right">accumulate</span>
8 Y. y3 ~# x1 N7 B$ B - </div>
1 N7 }, u2 f2 t3 ] C - <div class="mainbodyimg"><img src="test.png" /></div>
+ q( q( {- D. y1 O! E* n - </body>, `2 A4 `, \- j4 D$ c+ }# X
- </html>
# F% ], ]9 f* N9 s; v3 B
复制代码 , o3 c$ R8 Q! X* }! O2 C. C! y$ r
/ r2 r) S" g, _3 J$ }5 i+ ?( Y, ~0 H% N2 r
CSS文件:, @/ _3 q; O4 v9 |# u% S8 R
原理:5 o& H& v, G: M1 u/ Y) u6 X
1、设置两个span,其宽度及padding合计为图片宽度,并设置每个span中的文本分别左右对齐;3 N2 {: D/ z% p
2、将两个span都float left,这样左右两个span就会按顺序排列;) l' e0 B& A! k, I* d
& \4 }3 l# v2 w$ h8 ^5 Z- Z3 ~7 v- /*左对齐*/
; e8 m) j) m- ]+ K, x - .navtext .left {4 {: m- \% z& T# d1 N
- float: left;
+ K! c) ~/ r6 A. f - text-align: left;( `1 y; ^; R6 V' s; z2 w3 w
- padding: 0 0 0 2em;
" {$ _: V( A. c/ H - width: 18em;/ p" j- p/ t1 [
- border: 1px dotted black;$ w& r6 Z$ ]8 d
- }4 d; [* {" W+ I: u
- /*右对齐*/+ ~% D( w7 K, F# Z/ p3 d
- .navtext .right {
" R7 Q5 |0 v1 I% f - float: left;
; z( c& h& i3 _7 \5 W( L- x q' S - text-align: right;7 ?9 I5 \. D# _
- padding: 0 2em 0 0;- X1 F% ]5 a5 o- u9 Q
- width: 18em;
. T1 v- Y9 {" _; r - border: 1px dotted black;! n9 k! C4 i: v; p0 n; |; X
- }
) }7 `- l) Y" D/ X2 X - /*图片*/
0 c, _8 _+ Y M8 u" ~ - .mainbodyimg img {
) e2 ~) L! l0 G( A - width: 40em;
8 C7 p, l; b) a- s1 n$ X - border: 2px dotted black;% d+ b* ]! z$ w& L7 b: q) B" u4 v
- }7 {7 V1 y: w2 p: _4 X: a
复制代码
- ~' ]$ a4 B/ ~* n4 E; n1 F您可以用附件的测试文件多试试各种参数来满足个性化需求:
3 E0 o6 W0 N+ Y' d. T B( {8 L1 L, v6 s0 e; {
9 R$ s+ O5 ?- R3 s9 x+ J
5 q$ x+ Y$ a* V; `8 k |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|