TA的每日心情 | 奋斗 2019-10-13 07:34 |
---|
签到天数: 209 天 [LV.7]常住居民III
|
楼主 |
发表于 2019-2-26 21:19:31
|
显示全部楼层
本帖最后由 VimVim 于 2019-2-26 21:39 编辑
, ]+ D: q' ]# ]! J* r) T4 j! t2 _喬治兄 发表于 2019-2-26 14:15; R* U9 E2 C7 g+ u
VimVim 兄:5 ~2 B8 N2 o2 w& z/ h5 w8 _
請教一個排版的問題
: @, g! y( P$ K* A$ f小弟想把辭典的每頁首字和尾字置於同一列的左右兩端
, y& k% ?$ I/ P7 l) g8 v要的是这个效果吗?, x) {" \/ F7 ?* O2 S
下面的border纯粹是为了显示效果,你完全可以在css中将border设置删除。
. k( A ]' k" v! R% a6 B' C, G' a" r* g0 L* d
$ t! b5 h/ k, O; ]7 ^5 `; f; }HTML文件:- <!DOCTYPE html>
, I' g, I+ S( `4 b0 @ - <html xmlns="http://www.w3.org/1999/xhtml">3 f8 D0 j# G' N) [! a
- <head># f( n! `$ Y+ [, M8 v0 v2 L7 I
- <title></title>, A% V3 J2 }. n! X" O% }1 S3 t- P3 C
- </head>
3 g" |% A6 ]$ R5 E" I9 p6 \% Z - <body>; L1 m. N5 I' \( K0 Y! U% m( r
- <link rel="stylesheet" type="text/css" href="test.css" />& b8 O4 T. A& Z5 H0 T4 a8 v
- <div class="navtext">2 [1 R0 Z, F) z, G: ]: l+ F7 L
- <span class="left">accident</span>
2 ~3 Z% ~5 S1 {) z' h0 x- B8 C - <span class="right">accumulate</span>
) H* ?6 ~+ w+ T5 ^# j$ i - </div>
; X' B R+ j8 D5 i$ a0 o9 Q - <div class="mainbodyimg"><img src="test.png" /></div>
* Y& T) [, h) p1 J/ H/ i - </body>
* o$ k6 B% ]( W - </html>
, l" \( Q, @9 t4 U7 T6 l5 `5 g
复制代码 8 s3 y8 _$ V* M+ b2 X
' z. H/ |/ j$ g6 c. z* S, O- ~+ @( B
CSS文件:
5 |9 v& b/ Y; M* y: N$ y; ^1 Q原理:, ^5 N6 e! c0 X. e1 `& C; Z
1、设置两个span,其宽度及padding合计为图片宽度,并设置每个span中的文本分别左右对齐;
9 q9 g! [. Y' `' b3 k, r+ x2、将两个span都float left,这样左右两个span就会按顺序排列;
3 `" D+ T/ i8 v' H+ f
3 u/ p/ N* T( d/ k0 G- J0 Y- /*左对齐*/2 I4 [2 @* f& O0 \; w
- .navtext .left {
$ R# L% v& P U* }' k - float: left;
* e1 B% j0 J! {5 Q - text-align: left;2 [4 s7 t' k9 @- G" k# ]
- padding: 0 0 0 2em;6 X6 ?, f) B9 o9 a
- width: 18em;
3 r6 t# h) e# }$ ?4 w$ J/ W6 ^ - border: 1px dotted black;4 u7 O" p2 W6 }0 P" b* e' V1 M
- }
: V( l& [* @6 u4 B Z - /*右对齐*/$ e. N# n$ F! B
- .navtext .right {, L2 c- E- l2 r8 G; O
- float: left;
; \4 t+ F( A5 P8 s9 ^4 x - text-align: right;0 i/ p; o, l& J4 _: M
- padding: 0 2em 0 0;
; Z( V$ B W1 D - width: 18em;/ i- a( l, P& d) w3 u# l
- border: 1px dotted black;
/ i3 K6 w/ o. O) Y. f - }# O f+ r( W; y% ~8 V( N
- /*图片*/+ X8 Y! s; Y( C& d( o8 z8 O# w
- .mainbodyimg img {
% K& c4 L% o. x' K1 ~ - width: 40em;% V- Q( l# |7 x3 s) Q: q8 f. I
- border: 2px dotted black;+ _; |" M1 w& D& q9 E* Y
- }. X9 D8 U) E, b6 |3 d7 k
复制代码 5 Y) ~0 o# |5 s
您可以用附件的测试文件多试试各种参数来满足个性化需求:
; W9 K4 W' |$ l' E! U. A" u5 Z3 |9 p5 ~
$ G5 V: H- i, U s( [7 y( `' q
1 W8 i$ m0 F- M( i6 A) b( N
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|