如何在CSS中创建一个块引号，使其在相同高度显示时不会溢出(浮动)图像

kuhbmx9i 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(84)

这是我的CSS

.img-float-right {
    float: right;
    margin: 10px 0px 25px 35px !important;
}

.blockquote {
    font-size: 1.4em;
    margin: 30px auto 30px;
    width: 90%;
    font-family: Open Sans;
    font-style: italic;
    color: #D2B39B;
    padding: 1.2em 30px 1.2em 75px !important;
    border-left: 8px solid #D2B39B;
    line-height: 1.4;
    position: relative;
    background: #f5f5f5;
}

.blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #D2B39B;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.blockquote::after {
    content: '';
}

下面是我正在建设的网站的结果的图片：
https://github.com/EstefanTT/public/blob/main/stackOverflow_blockQuote.png
我希望文本和报价（如有必要）显示在图像的左侧。
到目前为止，我所有的意图都是把报价放在图片的顶部（就像图片不存在一样），或者把报价推下来放在图片的下面。
我在用Nuxt。js和Nuxt-content。我正在处理的页面是一个markdown页面，我在其中添加了自己的CSS。Nuxt将这个markdown页面转换为包含HTML页面不同元素的JSON。我不知道幕后到底发生了什么，这就是为什么我只发布了CSS。我大部分时间都在使用Vuetify，对CSS的理解不是很深。

css

来源：https://stackoverflow.com/questions/76137487/how-to-create-a-blockquote-in-css-that-doesnt-overflow-on-an-floating-image-w

1条答案

按热度按时间

axr492tv1#

只需将display: flex;（flow-root，grid，table，table-cell）添加到blockquote。
或者将overflow: hidden;添加到blockquote：

.content {
  display: flow-root;
}

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

blockquote {
  display: flex; /* 👈 */
  /* display: flow-root; */
  /* display: grid; */
  /* display: table; */
  /* display: table-cell; */
  /* overflow: hidden; */
  font-size: 1.4em;
  margin: 30px auto 30px;
  font-family: Open Sans;
  font-style: italic;
  color: #D2B39B;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid #D2B39B;
  line-height: 1.4;
  position: relative;
  background: #f5f5f5;
}

blockquote:before {
  font-family: Arial;
  content: '\201C';
  color: #D2B39B;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

<h1>Title</h1>
<div class="content">
 <img src="https://picsum.photos/200/500" alt="">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, labore, dolor, quaerat natus id molestias laboriosam quisquam illum deserunt error consequuntur aliquid dolorum deleniti nihil eos esse rerum iusto ut maxime ullam asperiores debitis saepe reprehenderit perferendis voluptate</p>
 <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptatibus aliquid cum dolorum porro voluptate esse vero aliquam. Illum, perspiciatis.</blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, maxime nostrum debitis tenetur aperiam dignissimos alias facere quisquam voluptas atque.</p>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

如何在CSS中创建一个块引号，使其在相同高度显示时不会溢出(浮动)图像

1条答案

相关问题

热门标签

最新问答