TA的每日心情 | 奋斗 2019-10-13 07:34 |
---|
签到天数: 209 天 [LV.7]常住居民III
|
楼主 |
发表于 2019-2-26 21:19:31
|
显示全部楼层
本帖最后由 VimVim 于 2019-2-26 21:39 编辑
5 ?0 Z3 u/ _8 x3 @- L; F% ]& m; A喬治兄 发表于 2019-2-26 14:15
6 ~# E5 G, a9 Z) V- oVimVim 兄:
/ m3 w! C# L) R% m) I請教一個排版的問題
( S0 g2 E, ]7 m9 j# p# K: o. e小弟想把辭典的每頁首字和尾字置於同一列的左右兩端 . K. Q9 H1 Y" k" i
要的是这个效果吗?
* X3 ^" p$ |% R下面的border纯粹是为了显示效果,你完全可以在css中将border设置删除。* m9 c, g% j6 Z& M
6 o; T, w `; g1 I' D
m" C3 V( l$ D1 U1 I# I- NHTML文件:- <!DOCTYPE html>" X0 q$ Z# j& l$ N
- <html xmlns="http://www.w3.org/1999/xhtml">
) i8 T G1 P8 \" `( g8 m - <head>' s* W5 w/ c' n
- <title></title>
- A' u- o" @3 c4 [3 _0 } - </head>( H: s# e2 h. g `8 _5 C( [
- <body>
. }7 d& I9 f; i - <link rel="stylesheet" type="text/css" href="test.css" />
- o6 T) U% v; ^6 ~# n" E, \4 v - <div class="navtext">/ e2 T* n6 l& S* k4 ^
- <span class="left">accident</span> A; r. S# i% @6 L& t$ l- j
- <span class="right">accumulate</span>
) q( o( F6 V0 H - </div>
# w9 k# X) X" b. C! `' Z" q1 ? - <div class="mainbodyimg"><img src="test.png" /></div>4 U& J' J. G! V
- </body>
- M8 T8 M7 @, c! M5 @; l - </html>+ u- X: k6 D- @2 S( h4 I4 v; b' C4 f
复制代码 ' V9 E/ _* ^1 \; g6 _2 r6 J
, L! k3 B0 e! [5 K* W
G2 F1 R1 ?1 E! N# x& A
CSS文件:4 o2 U& o5 O' Q
原理: M! {* z, n! ]1 X
1、设置两个span,其宽度及padding合计为图片宽度,并设置每个span中的文本分别左右对齐;
# ~5 m( |2 F- m; }1 I/ s) U2、将两个span都float left,这样左右两个span就会按顺序排列;0 f8 Q5 G# F) g7 c* J
( F- E, K8 f7 o! c s+ K
- /*左对齐*/
: ^9 x6 n+ S8 F. f, l$ g& A! X - .navtext .left { a% C0 c7 S! l8 g. E
- float: left;
% r j9 b( l; B5 q: D - text-align: left;
# o. _) F4 E: J5 g - padding: 0 0 0 2em;; I+ ]/ B4 g% m8 d# ~7 |
- width: 18em;
. d, ?# p7 o* [" r$ ~8 W - border: 1px dotted black;
% |9 y$ h# O1 E5 a8 _* }% g - }
# l; j1 r! F# T2 S+ E - /*右对齐*/; E2 ]. u. t1 o6 J0 d
- .navtext .right {
U; R) `0 k, X+ H, d - float: left;) p* q" d" U% L( x
- text-align: right;4 D3 x6 }" l1 [$ @. Z
- padding: 0 2em 0 0;8 P2 e- p, N5 h4 ?0 F N% W
- width: 18em;( N' ^9 ?7 |+ x4 P
- border: 1px dotted black;
4 Y0 ], Z. |% ?1 Z8 i$ j0 r( a - }
+ p+ I, d, ?* d' N3 O; w" F6 } i' C - /*图片*/' ?+ ]% k! }; c
- .mainbodyimg img {
7 k* j7 Y% I+ p! }) `8 x - width: 40em;) C7 Q _: {1 o
- border: 2px dotted black;
8 H' x9 C! v7 R3 x& s: k* e J - }$ x1 U; n/ p$ x$ `6 w) v
复制代码 , \& ]6 D% S) m8 n. S$ d2 p1 d+ Y! r4 p
您可以用附件的测试文件多试试各种参数来满足个性化需求:
. R7 ^6 Y" k$ o9 n0 A! k' Y( U) v- i! _6 A) O5 x3 z1 P
% q9 i. f$ J: q* u
) a. C( ^$ ^2 M3 L2 z
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|