Question

我想做到，所以看起来像这样：

如何使其看起来像所提供的图像？（仅适用于CSS和HTML）。

<head>

    <title>Webpage With Style</title>

    <style type="text/css">

        #main{

        }

        #title{
            text-align: center;
            position:relative;
            top: 125px;
            font-size: 33px;
        }

        #img-div{

        }

        #image {
            position:relative;
            display: block;
            margin-left: auto;
            margin-right: auto;
            top: 147;
        }

        #img-caption{

            margin: 160px 80px;
            text-align: justify;
            font-size: 16px;


        }

        /*   position:relative;
            align-self: right;
            top: 180px;  */

        body{
            background-color: aqua;
        }

        #billion{
            position: relative;
            text-align: center;
            top: -510;
            font-size: 16px;

        }

    </style>

</head>

<body>

    <main id="main">


        <h1 id="title">Dr. Norman Borlaug</h1> 

        <div id="billion">The man who saved a billion lives</div>

        <div id="img-div">

            <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"id="image">

            <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>


        </div>

    </main>

</body>

参见：

    #img-caption{

        margin: 160px 80px;
        text-align: justify;
        font-size: 16px;

如果我删除了“ justify”功能，那不会有什么不同，因此，它不起作用。我想像提供的图像一样稍微拉伸文本，并使其看起来像它。

Answer 1

您的图像正溢出其容器，并且包含相对定位的图像标题。您可以通过将图像的宽度设置为<= 100％来包含它。这将使它和标题具有相同的水平空间。

#main {}

#title {
  text-align: center;
  position: relative;
  font-size: 33px;
}

#img-div {}

#image {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#img-caption {
  text-align: center;
  font-size: 16px;
}

body {
  background-color: aqua;
}

#billion {
  position: relative;
  text-align: center;
  font-size: 16px;
}

<body>

    <main id="main">


        <h1 id="title">Dr. Norman Borlaug</h1> 

        <div id="billion">The man who saved a billion lives</div>

        <div id="img-div">

            <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"id="image">

            <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>


        </div>

    </main>

</body>

如果您希望图像和标题溢出容器（尽管我不知道为什么），则可以给标题提供绝对位置，将其空白设置为nowrap，并调整宽度和边距以适合所以：

       #main{
       }

        #title{
            text-align: center;
            position:relative;
            top: 125px;
            font-size: 33px;
        }

        #img-div{
          width: 100%;
          border: 1px solid red;
          overflow: visible;
        }

        #image {
            position:relative;
            display: block;
            margin-left: auto;
            margin-right: auto;
            top: 147;
        }

        #img-caption{
            position: absolute;
            width: 70%;
            margin: 1% 15%;
            text-align: center;
            font-size: 16px;
            white-space: nowrap;

        }

        /*   position:relative;
            align-self: right;
            top: 180px;  */

        body{
            background-color: aqua;
        }

        #billion{
            position: relative;
            text-align: center;
            top: -510;
            font-size: 16px;

        }

<body>

    <main id="main">


        <h1 id="title">Dr. Norman Borlaug</h1> 

        <div id="billion">The man who saved a billion lives</div>

        <div id="img-div">

            <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"id="image">

            <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>


        </div>

    </main>

</body>

Answer 2

更改/增加letter-spacing

字母间距CSS属性设置文本字符之间的间距行为。

MDN

#main {}

#title {
  text-align: center;
  position: relative;
  font-size: 33px;
}

#img-div {}

#image {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#img-caption {
  text-align: center;
  font-size: 16px;
  letter-spacing: .5px
}

body {
  background-color: aqua;
}

#billion {
  position: relative;
  text-align: center;
  font-size: 16px;
}

<main id="main">

  <h1 id="title">Dr. Norman Borlaug</h1>

  <div id="billion">The man who saved a billion lives</div>

  <div id="img-div">

    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" id="image">

    <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>

  </div>

</main>

Answer 3

如果我删除了“ justify”功能，则不会有什么不同，因此，它将无法正常工作。

不，当然不是，因为text-align: justify根据定义对齐所有行中的文本，除了最后一行-您只能使用在这里以开头一行文本，因此也是“最后”一行。

这是为了避免出现这样的情况，即您的文本以最后一行仅由两个（或三个）单词组成，然后在最左边得到一个单词（中间为一个）的方式流动，然后在最右边的那一个看起来很糟糕。

不过，您可以使用text-align-last明确指定文本最后一行的对齐方式。

我想进一步拉伸文本，但是“ text-align：justify”并没有满足我的要求

3 个答案: