TA的每日心情 | 奋斗 2019-10-13 07:34 |
---|
签到天数: 209 天 [LV.7]常住居民III
|
楼主 |
发表于 2019-2-26 21:19:31
|
显示全部楼层
本帖最后由 VimVim 于 2019-2-26 21:39 编辑
3 z' O! H/ F- q. T. w& ]8 v0 F* n喬治兄 发表于 2019-2-26 14:15 R( Q. k/ f8 {9 U
VimVim 兄:3 ^7 K w, m3 B9 h
請教一個排版的問題
# q0 l% Z* T! G" W7 k; K. `小弟想把辭典的每頁首字和尾字置於同一列的左右兩端 7 w# Z$ b3 m# z
要的是这个效果吗?. u& H, L& P Z' S: R# I
下面的border纯粹是为了显示效果,你完全可以在css中将border设置删除。 X1 \' r8 n* r2 {: i3 U$ }* S" ~$ W
. i% o; l6 X, Z/ h- e& i7 B
$ m! N' ~- z, M% h8 S, k& j/ o
HTML文件:- <!DOCTYPE html>% C* d3 t0 _% a5 S+ }0 |
- <html xmlns="http://www.w3.org/1999/xhtml">
; ?" { e- P2 A# R- }9 Y6 W: C2 k* F - <head>/ I1 U/ Y: k" b4 O% \1 r& v9 |
- <title></title>7 e, X$ q8 w7 }5 n1 q7 D& }% m! m
- </head>
3 h0 f8 q6 S: P+ e- ^6 h; L - <body>, \3 X9 Q) r7 g [4 Z3 D0 o+ h
- <link rel="stylesheet" type="text/css" href="test.css" />
^3 [6 _% V6 W8 l( x+ G4 ] - <div class="navtext">7 t/ d, [5 m: O/ |/ I
- <span class="left">accident</span>
1 C! V7 o- o+ Z9 d# }4 | - <span class="right">accumulate</span>* T/ [/ B8 l2 A6 \
- </div>/ Y2 \4 \% W' X& D7 D5 E/ ]
- <div class="mainbodyimg"><img src="test.png" /></div>
. g, j& f6 d, k' Z _5 G - </body># u1 ] i/ ~. k$ _8 A! j, k
- </html>
, P2 M8 u, c' Z. S
复制代码
6 W& f6 p5 x6 D, X9 c1 z/ J4 t( G) l1 [( v) c$ `1 T
' [* @% k1 v% J% P% a( p8 ?
CSS文件:6 ~. l t2 m- {
原理:
: D4 s1 S" I& h( x; R4 @1、设置两个span,其宽度及padding合计为图片宽度,并设置每个span中的文本分别左右对齐;
" j8 @; V @& j$ i5 s* d2、将两个span都float left,这样左右两个span就会按顺序排列;. ?0 Q0 R0 H7 u
- W' g( l! e- }! b* l
- /*左对齐*/
# x1 S7 {1 A5 Q/ R- B9 s - .navtext .left {
" n/ ?# f- o; u4 @1 a - float: left;( n" s" l1 w% D; U6 p/ t) ^
- text-align: left;5 ?( l0 X3 E$ K9 }. r9 Z+ I
- padding: 0 0 0 2em;
# T; j2 U7 ~0 y9 @/ G) F, |$ R - width: 18em;
/ m0 _, B* {# F+ E - border: 1px dotted black;' X4 p* P: @$ m# E% w' R4 A
- }- O% q' y4 h1 v" h2 t0 o
- /*右对齐*/' S1 y$ w$ W( f1 g% v' L# c& i
- .navtext .right {: D# B$ p& F8 V/ j* b* ^+ g
- float: left;% y- p1 K0 Q1 T: y+ ^4 R. e9 `2 k7 Y
- text-align: right;- M! e! C! ?! V: a) {" Z6 c
- padding: 0 2em 0 0;9 l7 v3 P+ {" T' Y
- width: 18em;
5 N8 K, q3 |' U0 T B - border: 1px dotted black;
* h. P. |* e: Z6 d6 a) l - }& f* Q |9 X \+ m
- /*图片*/
9 O6 k4 H; K5 u$ v8 J) [4 R1 r - .mainbodyimg img { $ U; \5 z$ r2 {/ }$ s
- width: 40em;
" _3 N* F4 K, Q& y - border: 2px dotted black;
) x/ T5 J; k- u' j, D! a) W. d - }
0 W/ M4 R4 q' J V: P
复制代码 9 e' g( u* S1 ~8 _4 d2 k
您可以用附件的测试文件多试试各种参数来满足个性化需求:2 I$ [4 g) G1 d0 U% \
( [4 S2 ?" z- h O# J( |1 X: C
7 z% F& r3 r) `) y* S
3 Y3 M; w. ~% p( F; R7 p |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|