html - 使 blockquote 适应图像高度并添加程式化的引用

Question

我想修改我的 html/css 以获得类似红色修改的内容，添加两个程式化引号，并使图像适应我的 <blockquote></blockquote> 的大小元素。

我的html是

<img src="presentation-images/bernardlee.jpg" style="width:300px";
class = "author"/>

<blockquote> [...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim
Berners-Lee (1991)</blockquote>

我的CSS:

mark {
  background-color: #EBEBE4;
  color: black;
}


.author
{
  float:left;
  clear:both;
  margin:8px 8px 8px 8px;
}


 blockquote {
  display: block;
  margin: 1.5em 0 1.5em -1.5em;
  padding: .75em .5em .75em 1em;
  background: #fff;
  font-family: 'Crimson Text';
  border-left: 0.5em solid green;
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.5;
  -webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
  -moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
  box-shadow: 0 0 5px rgba(20,20,20,0.5);
}

你可以在这里看到 fiddle :http://jsfiddle.net/h6m80gqb/

Answer 1

当你标记这个 HTML5 并且甚至奖励它时，我决定自己尝试一下，尽管我的解决方案最终与 Clint Brown 的回答有同样的弱点，但至少我没有在我的 css 中使用表格，我的引号更加程式化 :P 。

DOM 结构

<div class="quote">
    <blockquote> [...] <mark>The project started with the philosophy that
    much academic information should be freely available to anyone.</mark>
    It aims to allow information sharing within internationally dispersed
    teams, and the dissemination of information by support groups. -- Tim
    Berners-Lee (1991)</blockquote>
</div>

这就是我最终得到的，如果您需要在生成的 HTML 中包含图像 url(您可能会这样做)，您还需要为此放置一个单独的标签。

让图片适应盒子的大小

虽然灵活的盒子模型在这里有点矫枉过正，但它仍然非常出色。一个简单的display:flex;在容器上和flex: 0 0 20%;在图像元素上将导致它获得容器的高度，因为容器的高度由 <blockquote> 中的文本量定义。这意味着图像元素正在适应 <blockquote> .接下来您需要做的就是将图像设置为 background或者background-size:cover;或 background-size:contain;对于图像(如果您选择包含，您还需要添加 background-repeat:no-repeat; background-position:right;)。

.quote{
    display:flex;
    box-shadow: 0 0 5px rgba(20,20,20,0.5);
    border-left: 0.5em solid green;
    margin:10px;
}
div:before{
    content:'';
    display:block;
    flex: 0 0 30%;
    padding-left:0.5em;
    background:url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg');
    background-size:cover;
    background-position:center;
}

引用

当您谈论程式化引号时，我相信您想要的不仅仅是插入相关字符，所以您可以 float第一个引号使用大字体并内联第二个引号以提供以下最终外观

尝试使用字体和其他东西仍然可以大大增强所有内容的外观，但这确实说明了这一点。

blockquote:before,blockquote:after{
    display:block;
    font-size:60px;
    height:0.5em;
    overflow:hidden;   
    position:relative;
    top:-0.15em;
    color:red;
    margin-bottom:-0.15em;
}
blockquote:before{
    float:left;
    padding-right:10px;
    content:'“';
}
blockquote:after{
    content:'”';
    display:inline-block;
    padding-left:10px;
    vertical-align:top;
}

这个答案中的“缺陷”

就像 Brown 的回答一样，高度会根据需要适应文本，但是宽度是固定的，这在某种程度上被部分覆盖的图像“解决”了。一个同时适应宽度和高度的解决方案肯定需要 Javascript，因为它是一种循环依赖(通过改变宽度，blockquote 的高度改变，因此图像高度的宽度改变，因此宽度更改，可以解决，但不能在 HTML/CSS 中解决)。