TA的每日心情 | 奋斗 2019-10-13 07:34 |
---|
签到天数: 209 天 [LV.7]常住居民III
|
楼主 |
发表于 2019-2-26 21:19:31
|
显示全部楼层
本帖最后由 VimVim 于 2019-2-26 21:39 编辑
% S/ L- X# b0 V9 J: j( o) y8 y8 S喬治兄 发表于 2019-2-26 14:15
& a& A3 |; {" D' T T7 tVimVim 兄:
& _$ O$ l8 Z3 e7 y. e" u請教一個排版的問題
; A7 O3 P' z0 Y% X0 _1 P$ a7 e小弟想把辭典的每頁首字和尾字置於同一列的左右兩端
0 _! W8 {4 B. o9 c+ G要的是这个效果吗?, M. ]' M! s9 j' Z9 o. ]
下面的border纯粹是为了显示效果,你完全可以在css中将border设置删除。
% q: ]0 @( e' U8 Q
' c3 k9 Y/ ^8 N, T3 o
$ h4 L" Z F2 MHTML文件:- <!DOCTYPE html>
2 @% }$ m. A5 o0 x% Y6 }* u - <html xmlns="http://www.w3.org/1999/xhtml">1 `: a1 j! a( w& ]
- <head>) k: O; z) s& Y
- <title></title>. I4 C1 y* f' d: b
- </head>* z, a, h; p4 `; q/ i- q
- <body>! ^4 r m9 }8 u' y6 E9 O0 i8 i
- <link rel="stylesheet" type="text/css" href="test.css" />
1 F0 C" @/ k. M) |1 W - <div class="navtext">
& Q b. |, w1 v' P+ q! Y - <span class="left">accident</span>
$ \/ i7 |" p$ g1 h, b - <span class="right">accumulate</span>) E5 X s: i9 _) ^+ u
- </div>, Y2 |7 K; C9 a( r5 m
- <div class="mainbodyimg"><img src="test.png" /></div>
$ C! Y" v% I$ I - </body>
* S. T1 d3 ^7 G2 m - </html>
! x) x0 i3 g, a6 c4 r2 z
复制代码 1 w% N+ }1 k- y. N. D2 L1 n
% a T6 `/ k, Y4 ?; n$ e+ h
7 g& d8 P" j+ V& ICSS文件:" G- L+ V. @) `( F' |; k
原理:* `$ }9 P/ q* O7 Z8 U, x
1、设置两个span,其宽度及padding合计为图片宽度,并设置每个span中的文本分别左右对齐;
+ Q. J! P0 M3 ?/ x& d( O; _" l8 Q2、将两个span都float left,这样左右两个span就会按顺序排列;: Z7 s' g2 @1 v7 n
V ?" T* L5 p9 z- /*左对齐*/7 x7 p9 P$ J& a9 x- `4 \. a; C9 z8 C
- .navtext .left {
3 [& d7 U3 {( F/ v/ M; h' j - float: left;7 s+ g$ o3 J1 z5 X3 D
- text-align: left;
5 }5 X! T, X" O! X - padding: 0 0 0 2em;
- {; w$ L2 \0 @ - width: 18em;1 [: S" ~+ j6 @! o
- border: 1px dotted black;
' Z& C- D" J% ^/ e. r; g - }
4 L, d4 }; Q) m0 Q' a% z( F% f: E: {/ _ - /*右对齐*/ l( E; W& T9 Z) b
- .navtext .right {
/ \- U" q- D! E' `/ ~ - float: left;' ]# w0 I& G% ~' s8 H+ E
- text-align: right;8 s) {8 }% v$ K# w% z
- padding: 0 2em 0 0;$ e# i0 D; G& A3 i4 X( P' M
- width: 18em;+ i4 t" r+ g+ W( T
- border: 1px dotted black;
6 l3 x# g- h; Z. t: {9 q4 e - }
3 Z5 `% r p5 E: Y4 j1 E - /*图片*/
" y' v0 G# s# c) _! d, F6 i: u9 U" } - .mainbodyimg img {
& v- H3 C3 p, f2 { - width: 40em;
$ V7 B( i* z4 F: K+ g9 @- N$ X - border: 2px dotted black;+ P6 D2 u1 P( f
- }
# f: L5 F* B% Y) i/ t
复制代码 9 U. R9 E6 k/ i5 [! t
您可以用附件的测试文件多试试各种参数来满足个性化需求:
( U6 }7 Y6 U6 F% j6 g. A2 M% d+ v3 F' B
0 \" d H; X, h3 c- Y" ]( X# `# w; _0 o; @5 k( g: o
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|