2015-11-12所有文章  Luka

CSS排版技巧 - 文繞圖

文繞圖

先看效果，這次要做的是文繞圖技巧，可以選擇靠左或靠右。

html結構

圖片(img)必須在段落(p)的上面，當圖片加上float:left屬性時，圖片的空間會消失，變成浮在畫面上，利用這個技巧，我們來做到文繞圖的效果。

1
2
3
<div class="image-container">
      <img class="image1" src="http://zh-tw.learnlayout.com/images/ilta.png"  alt=""/>
      <p class="pp1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley o.......(略)</p>

完整範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container{
          max-width: 60%;

          margin: 0 20%;
        }

        .image1{
          float: right;
        }

        .image2{
          float: left;
          margin-right: 20px;
        }

    </style>
</head>
<body>

    <div class="image-container">
      <img class="image1" src="http://zh-tw.learnlayout.com/images/ilta.png"  alt=""/>
      <p class="pp1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      <img class="image2" src="http://zh-tw.learnlayout.com/images/ilta.png" alt="" />
      <p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div><!-- image-container -->

</body>
</html>

容器水平置中是使用把最大寬度設成60%，並使用margin:auto技巧。

想要分段的時候用div包起來並加上.clear-fix

如果段落(p)高比圖片(img)小的時候會出現這樣的情況。有時候我們想要段落分明，這時候使用div包覆並幫div加上.clear-fix。

加完之後的效果，圖片一已經展開了一個長方形的空間。

完整範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container{
          max-width: 60%;

          margin: 0 auto;
        }

        .image1{
          float: right;
          clear:right;
        }

        .image2{
          float: left;

          margin-right: 20px;
        }

        .image1-wrapper{
          border: 3px dashed black;
        }

        .clear-fix{
          overflow: auto;
          zoom: 1;
        }

        @media screen and (max-width: 767px) {
          .image-container {
            background-color: lightgreen;
            max-width: 100%;
          }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styke.css" media="all">
</head>
<body>
    <div class="image-container">
      <div class="clear-fix image1-wrapper">
        <img class="image1" src="http://zh-tw.learnlayout.com/images/ilta.png"  alt=""/>
        <p class="pp1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
        <p class="pp1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
      </div><!-- clear-fix -->
      <img class="image2" src="http://zh-tw.learnlayout.com/images/ilta.png" alt="" />
    </div><!-- image-container -->

</body>
</html>

幫段落左邊加上斷行效果用clear:left

這次段落和img的html是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container{
          max-width: 60%;

          margin: 0 auto;
        }

        .image1{
          float: right;
          clear:right;
        }

        .image2{
          float: left;

          margin-right: 20px;
        }

        .image1-wrapper{
          border: 3px dashed black;
        }

        .clear-fix{
          overflow: auto;
          zoom: 1;
        }



        @media screen and (max-width: 767px) {
          .image-container {
            background-color: lightgreen;
            max-width: 100%;
          }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styke.css" media="all">
</head>
<body>
  <div class="image-container">
    <img class="image2" src="http://zh-tw.learnlayout.com/images/ilta.png" alt="" />
    <p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
  </div><!-- image-container -->
</body>
</html>

呈現的效果：

幫段落(p)加上clear:left後：

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container{
          max-width: 60%;

          margin: 0 auto;
        }

        .image1{
          float: right;
        }

        .image2{
          float: left;
          margin-right: 20px;
        }

        .image1-wrapper{
          border: 3px dashed black;
        }

        .clear-fix{
          overflow: auto;
          zoom: 1;
        }

        .pp2{
          clear: left;
        }



        @media screen and (max-width: 767px) {
          .image-container {
            background-color: lightgreen;
            max-width: 100%;
          }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styke.css" media="all">
</head>
<body>
  <div class="image-container">
    <img class="image2" src="http://zh-tw.learnlayout.com/images/ilta.png" alt="" />
    <p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
  </div><!-- image-container -->
</body>
</html>

結論

  1. 加上 float 屬性之後在空間會受到外部 .image-wrapper 的限制。
  2. 然而對同層元素來說，設成 float 的 img 空間會消失，因此在float img 下方的同層元素會直接浮上來，空間跟下方的同層元素共用，內容卻是流動的，形成文繞圖的效果。
  3. 如果想要斷行在 p 的左方幫p加上float:left，想要斷行在 p 右方幫 p 加上 float:right。
  4. .image-wrapper高度比圖片的時候需要加上clear-fix。

參考資料

float與clear用法 - 布魯克斯- 點部落
CSS - 關於 float 屬性

#

評論

最新文章

彙整

標籤

AWS2
ActiveRecord2
Agile4
Ajax3
Algorithm11
Atom5
Bootstrap3
CI/CD1
CORS1
CSS6
Coockie1
Course1
Crawler2
Cronjob1
Database2
Design Pattern2
DevOps1
Devops6
Docker1
DroneCI1
EDX Linux Foundation12
EFK6
ELK1
Elasticsearch1
Flask1
Fluentd6
Git1
Github2
Golang2
HTML14
Hacker1
Harbor1
Kanban2
Kubernetes2
Learning2
Linux13
Metaprogramming2
Meteor2
Minikube2
Mysql1
OSX4
Open Source1
PSD to HTML2
Python1
Rails17
Redmine1
Ruby16
Ruby Bit7
S32
SCSS3
Security1
Session1
Sinatra1
Sublime2
Text Editor7
Time2
Typescript1
UML1
Unit Test1
Vim1
Web Foundation1
gem1
jQuery7
javascript24
×