Question

我有一个blockquote和一个段落，我正在尝试o将blockquote左侧的文本对齐，就像这里的img一样

http://www.ironspider.ca/graphics/alignment.htm

我该怎么做？

   <p>
skcaskckascksakcosaocksocksoososkososooososocsosokoskcoskosopapckpefjwjfoejfiewfoiewjfjwefjewfowefwefowefjwejfoewfowejfjewfoewfoewofejwofjejfiejiejfej

    <blockquote>
    For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    </blockquote>

okfoefjpowejfoewjfjewfjeiowfjoewjfowejfoewofewofjewjfoiewjfoiewfoiewiofjewo

</p>

像这样

Answer 1

您应该使用CSS而不是示例中的HTML对齐属性。

使用float: right并为块引用width以满足您的需求。

有关花车的更多信息： https://css-tricks.com/all-about-floats/

.float-right {
  width: 50%;
  float: right;
}

<p>
<blockquote class="float-right">
    For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. 
</blockquote>
skcaskcka scksakc osaocksocks oososk osos ooo so socsosokosk coskos opapc kpe fjwjfoejfie wfoi ewjfj wefjewfo wefwefowef jwejfoewfo wejfjew foew foewofej wofjejfie jiejfej  okfoef jpowejfoewjfjewfjeio wfjo ewjfowej foe wofe wofjew jfoiew jfoiew foiewiofjewo
</p>

Answer 2

在这里，你好友。请查看以下codepen link。

您基本上需要使用名为float的css属性。它指定元素是否应该浮动。在这里，您需要float:right;将其移至右侧。给出你想要给的宽度和宾果。完成！

注意： - 如果元素绝对，则无法使用此属性。

您可以获得有关float here的更多信息。

.blockquote-text{
  float: right;
  width: 30%;
  background-color: #ddd;
}

<p>
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
    <blockquote class="blockquote-text">
    For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    </blockquote>
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 IpsumLorem 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>

对齐块引用左侧的文本

2 个答案: