<span style=
"color: #008080;"
> 1</span> <span style=
"color: #0000ff;"
><!</span><span style=
"color: #ff00ff;"
>DOCTYPE html</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
> 2</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>html</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
> 3</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>head</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
> 4</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>meta </span><span style=
"color: #ff0000;"
>charset</span><span style=
"color: #0000ff;"
>=
"utf-8"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
> 5</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>title</span><span style=
"color: #0000ff;"
>></span>不改变DOM结构的流体布局<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>title</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
> 6</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>style</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
> 7</span> <span style=
"background-color: #f5f5f5; color: #800000;"
> .container </span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span>
<span style=
"color: #008080;"
> 8</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> width</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>600px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
> 9</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> margin-left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> auto</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>10</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> margin-right</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> auto</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>11</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> background-color</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> orange</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>12</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> font-size</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 16px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>13</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> line-height</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 1.5</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>14</span> <span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #008080;"
>15</span>
<span style=
"color: #008080;"
>16</span> <span style=
"background-color: #f5f5f5; color: #800000;"
> .box1 </span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span>
<span style=
"color: #008080;"
>17</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> width</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>100%</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>18</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> float</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>19</span> <span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #008080;"
>20</span>
<span style=
"color: #008080;"
>21</span> <span style=
"background-color: #f5f5f5; color: #800000;"
> .box2 </span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span>
<span style=
"color: #008080;"
>22</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> margin-right</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 220px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>23</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> padding-left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 20px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>24</span> <span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #008080;"
>25</span>
<span style=
"color: #008080;"
>26</span> <span style=
"background-color: #f5f5f5; color: #800000;"
> img </span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span>
<span style=
"color: #008080;"
>27</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> width</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>200px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>28</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> float</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>29</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> margin-left</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>-200px</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>30</span> <span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #008080;"
>31</span>
<span style=
"color: #008080;"
>32</span> <span style=
"background-color: #f5f5f5; color: #800000;"
> .clearfix:after </span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span>
<span style=
"color: #008080;"
>33</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> content</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
>
""
</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>34</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> display</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> table</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>35</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> clear</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> both</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>36</span> <span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #008080;"
>37</span>
<span style=
"color: #008080;"
>38</span> <span style=
"background-color: #f5f5f5; color: #800000;"
> .clearfix </span><span style=
"background-color: #f5f5f5; color: #000000;"
>{</span>
<span style=
"color: #008080;"
>39</span> <span style=
"background-color: #f5f5f5; color: #ff0000;"
> *zoom</span><span style=
"background-color: #f5f5f5; color: #000000;"
>:</span><span style=
"background-color: #f5f5f5; color: #0000ff;"
> 1</span><span style=
"background-color: #f5f5f5; color: #000000;"
>;</span>
<span style=
"color: #008080;"
>40</span> <span style=
"background-color: #f5f5f5; color: #000000;"
>}</span>
<span style=
"color: #008080;"
>41</span>
<span style=
"color: #008080;"
>42</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>style</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>43</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>head</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>44</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>body</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>45</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>div </span><span style=
"color: #ff0000;"
>
class
</span><span style=
"color: #0000ff;"
>=
"container clearfix"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>46</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>div </span><span style=
"color: #ff0000;"
>
class
</span><span style=
"color: #0000ff;"
>=
"box1"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>47</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>div </span><span style=
"color: #ff0000;"
>
class
</span><span style=
"color: #0000ff;"
>=
"box2"
</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>48</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>h3</span><span style=
"color: #0000ff;"
>></span>不改变DOM位置的流体布局<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>h3</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>49</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>假如有一段文本和一幅图像,在DOM节点中,文本在前,图像在后,怎么能把图像定位到右边呢?<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>50</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>通常的做法是,调换DOM节点中图像与文本的位置,让图像在前,文本在后,然后将图像浮动到右边即可。<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>51</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>但这样改变DOM节点顺序始终不妥,还有什么更好的方法呢?<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>52</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>下面就介绍一种新的思路来完成布局。<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>p</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>53</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>ul</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>54</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>将文本用div包起来,定义为box1;现在的结构是一个box1和一个img。<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>55</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>将box1宽度设为100%,左浮动;将img设置一个宽度,也左浮动,然后margin-left设为负的宽度值;此时图像就定位到文本的右边啦。<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>56</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>但是有一个问题,图像盖住了文本内容,这可怎么办?<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>57</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>重点来了,在box1中增加一个box2,box2把文本全部包起来,然后margin-right设为图像的宽度(+额外的间距),这样就解决问题啦!<span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>li</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>58</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>ul</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>59</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>div</span><span style=
"color: #0000ff;"
>></span><span style=
"color: #008000;"
><!--</span><span style=
"color: #008000;"
>关闭box2</span><span style=
"color: #008000;"
>--></span>
<span style=
"color: #008080;"
>60</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>div</span><span style=
"color: #0000ff;"
>></span><span style=
"color: #008000;"
><!--</span><span style=
"color: #008000;"
>关闭box1</span><span style=
"color: #008000;"
>--></span>
<span style=
"color: #008080;"
>61</span> <span style=
"color: #0000ff;"
><</span><span style=
"color: #800000;"
>img </span><span style=
"color: #ff0000;"
>src</span><span style=
"color: #0000ff;"
>=
"http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"
</span><span style=
"color: #ff0000;"
> alt</span><span style=
"color: #0000ff;"
>=
"a picture"
</span><span style=
"color: #ff0000;"
> style</span><span style=
"color: #0000ff;"
>=
"width:200px;height:300px"
</span> <span style=
"color: #0000ff;"
>/></span>
<span style=
"color: #008080;"
>62</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>div</span><span style=
"color: #0000ff;"
>></span><span style=
"color: #008000;"
><!--</span><span style=
"color: #008000;"
>关闭container</span><span style=
"color: #008000;"
>--></span>
<span style=
"color: #008080;"
>63</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>body</span><span style=
"color: #0000ff;"
>></span>
<span style=
"color: #008080;"
>64</span> <span style=
"color: #0000ff;"
></</span><span style=
"color: #800000;"
>html</span><span style=
"color: #0000ff;"
>></span>