Question

我想在每个blockquote之前添加一些文字。这是一个例子：

需要注意的是，html是由markdown生成的，因此无法对其进行修改。它将始终具有格式 <blockquote> <div>content</div> </blockquote>。

我尝试过使用flex grid，但我真的不知道我在使用flex做什么。这里和我一样接近：

＆＃13;

blockquote {
    background-color: #ccc;
    display: flex;
}
blockquote > *::before {
    background-color: #333;
    color: white;
    content: "quote";
    flex: 2em;
    display: inline-block;
    transform: translate(-50%, 0) rotate(-90deg);
}
blockquote > * {
    flex: 100%;
}

＆＃13;

<blockquote>
    <p> Lorem ipsum dolor </p>
</blockquote>

<blockquote>
    <ol>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
    </ol>
</blockquote>

<blockquote>
    <div> other content </div>
</blockquote>

＆＃13;

Answer 1

实现这一目标的最简单方法是使用位于左侧的背景图像，但是只有几种方法可以通过CSS实现此目的。

您可以在不使用弹性框或旋转伪元素的情况下执行此操作。

编辑 +1到@ G-Cyr使用transform: scale(-1);

＆＃13;

blockquote {
    background-color: #ccc;
    box-sizing: border-box;
    min-height: 60px;
    padding: 10px 10px 10px 40px;
    position: relative;
}
blockquote::before {
    background-color: #333;
    color: white;
    content: "quote";
    display: block;
    padding: 5px;
    position: absolute;
    top: 0;
    left: -10px;
    bottom: 0;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: center;
    box-sizing: border-box;
    -ms-transform: scale(-1);
    transform: scale(-1);
}

＆＃13;

<blockquote>
    <p> Lorem ipsum dolor </p>
</blockquote>

<blockquote>
    <ol>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
    </ol>
</blockquote>

<blockquote>
    <div> other content </div>
</blockquote>

＆＃13;

Answer 2

你可以看看写作模式和flex（我仍然添加与@itod不同的答案方法）

＆＃13;

<blockquote>
  <p> Lorem ipsum dolor </p>
</blockquote>

<blockquote>
  <ol>
    <li>blah</li>
    <li>blah</li>
    <li>blah</li>
  </ol>
</blockquote>

<blockquote>
  <div> other content </div>
</blockquote>

＆＃13;

class reserve{
  private:
      vector<float> coordinates; 
  public:
      reserve(const reserve &);
      void addACoordinate(float);
      void readCoordinates();
      int getDim();
};

reserve::reserve(const reserve &w){
    int i;
    for(i=0; i<coordinates.size(); i++){
        coordinates[i] = w.coordinates[i];
    }
}

void reserve::addACoordinate(float c){
    coordinates.push_back(c);
}

void reserve::readCoordinates(){

    int i; 
    cout << "the coordinates are : ";
    for(i=0; i<coordinates.size(); i++){
       cout << coordinates[i] << " ";
    }

    cout << endl;
}

int reserve::getDim(){
    return coordinates.size();
}

＆＃13;

Answer 3

HTML

    <blockquote>
    <p> Lorem ipsum dolor </p>
</blockquote>

<blockquote>
    <ol>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
    <li>blah</li>
<li>blah</li>
<li>blah</li>

    </ol>
</blockquote>

<blockquote>
    <div> other content </div>
</blockquote>

CSS

blockquote {
  display: flex;
  background-color: #ccc;
}

blockquote::before {
  transform: rotate(180deg);
  text-align: center;
  padding: 0.5rem 0;
  background: #333;
  color: #fff;
  content: "Quote";
  width: 2rem;
  line-height: 2rem;
  writing-mode: vertical-lr; 
}

blockquote>* {
    padding: 0 0 0 1.5rem;
}

https://jsfiddle.net/nhz92mth

Answer 4

将伪元素设置为blockquote的子元素。使用writing-mode: vertical-lr垂直显示文本，并将文本从底部开始旋转。请参阅css中的评论。

＆＃13;

blockquote {
  display: flex;
  background-color: #ccc;
}

 /** the pseudo element should be a child of blockquote **/
blockquote::before {
  width: 2em;
  line-height: 2em; /** align the text horizontally **/
  writing-mode: vertical-lr; /** set to vertical **/
  transform: rotate(180deg); /** rotate to start from the bottom **/
  text-align: center; /** align the text vertically **/
  padding: 0.5em 0;
  background: #333;
  color: white;
  content: "Quote";
}

blockquote>* {
  flex: 1; /** take all remaining free space **/
  padding: 0 0 0 1.5em;
}

＆＃13;

<blockquote>
  <p> Lorem ipsum dolor </p>
</blockquote>

<blockquote>
  <ol>
    <li>blah</li>
    <li>blah</li>
    <li>blah</li>
  </ol>
</blockquote>

<blockquote>
  <div> other content </div>
</blockquote>

＆＃13;

在全角元素之前添加固定宽度的伪元素

4 个答案: