CSS排版技巧 - 文繞圖

4 minute read

文繞圖

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

html結構

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

<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>

完整範例

<!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

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

完整範例

<!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是:

<!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後:

程式碼

<!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 屬性

Leave a Comment