Question

这是我的代码：

.solid_color{
  background-color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
      <i>(Quote from someone)</i>
  </div>
</div>

目前div.solid_color是一条线。它的高度应与邻居元素的高度相同。我怎么能这样做？

Answer 1

您可以使用 Flexbox 执行此操作：

＆＃13;

.parent {
  display: flex;
  /* reason: "align-items: stretch" which makes flex-items of equal height by default, obviously they all take the height of the "tallest" one */
}

.solid_color {
  background-color: gray;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="parent">
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
    " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
    <i>(Quote from someone)</i>
  </div>
</div>

＆＃13;

Answer 2

您只需使用选择器通过JS执行此操作，并使用var height = document.querySelector('.col-xs-9').getBoundingClientRect().height; document.querySelector('.solid_color').style.height = height + 'px';找到所需的高度。

.solid_color{
  background-color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
      <i>(Quote from someone)</i>
  </div>
</div>

#include <iostream>
#include <string>
#include <algorithm>

int main() {
    std::cout << "Enter string: ";
    std::string s;
    std::getline(std::cin, s);
    std::transform(s.begin(), s.end(), s.begin(), ::tolower);
    std::cout << s;
}

Answer 3

在父容器中添加display: flex;，然后从子div中删除height: 100%;。

.solid_color{
  background-color: gray;
}
.myparent{
 display: flex;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="myparent">
  <div class="solid_color col-xs-3"></div>
  <div class="col-xs-9">
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
      <i>(Quote from someone)</i>
  </div>
</div>

希望这个帮助

Answer 4

我会给背景颜色的div一个绝对的位置，并用带有一些边距的文本推过div。请参阅以下代码：

<!DOCTYPE html>
<html>

    <head>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
        <style>
            .solid_color {
                position: absolute;
                left: 0;
                top: 0;
                width: 25%;
                height: 100%;
                background-color: gray;
            }
            .outer {
                position: relative;
                float: left;
                display: block;
                width: 100%;
            }
            .right-text {
                margin-left: 25%;
            }

        </style>
    </head>
    <body>
        <div class="outer">
        <div class="solid_color col-xs-3"></div>
        <div class="right-text col-xs-9">
            " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
            <i>(Quote from someone)</i>
        </div>
    </div>
    </body>

</html>

如何填写父高？

4 个答案: