Question

我试图以许多不同的方式解决这个问题，但它无法正常工作。

我有一排2列。第一列包含将接收动态文本的文本。另一列的图像必须响应地调整其大小，无论文本内容高度如何。 text列指向行父div的高度，因此，我的image-parent div必须达到100％的高度。有没有可用的解决方案不使用flex-box或JS？我试图避免在这种情况下使用flexbox / JS。

This is the result at the moment:

由于文本位于同一行的图像旁边，因此父div很高。

PS：我在图像上放置了100px的高度只是为了告诉你。我知道我不能使用固定高度。如何使包含background-image的div跟随父行div的高度而不依赖于它具有的内容（文本）量？

提前非常感谢你！

这是我的HTML：

<section>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-5 col-sm-push-7 no-padding">
              <div class="img-parent"></div>
            </div><!-- ./col-xs-12 -->

            <div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent">
              <h2>My Title</h2>
              <h3>My subtitle</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>

              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
            </div><!-- ./text-parent -->
          </div><!-- ./row -->
        </div><!-- ./container -->
      </section>

CSS：

.text-parent{
  background-color:lightgrey;
  padding:30px;
}

.text-parent h2,
.text-parent h3{
  font-weight:600;
  text-transform:uppercase;
}
.text-parent h2{
  font-size: 45px;
}

.text-parent h3{
  max-width:560px;
  font-size:20px;
  color:#ed1c24;
  margin-bottom:40px;
}

.text-parent p{
  max-width:500px;
  font-size:12px;
  line-height:20px;
  text-align:justify;
}

.row{
  border:3px solid green;
}

.no-padding{
  padding:0;
}

.img-parent{
  height:100px; /*just to show a little part of the image*/
  background-image:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

Answer 1

希望这会对您有所帮助：

html

<section>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-5 col-sm-push-7 no-padding"></div>
            <!-- ./col-xs-12 -->

            <div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent">
                <h2>My Title</h2>
                <h3>My subtitle</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
            </div>
            <!-- ./text-parent --> 
        </div>
        <!-- ./row --> 
    </div>
    <!-- ./container --> 
</section>

css

.text-parent h3 {
    font-weight: 600;
    text-transform: uppercase;
}
.text-parent h2 {
    font-size: 45px;
}
.text-parent h3 {
    max-width: 560px;
    font-size: 20px;
    color: #ed1c24;
    margin-bottom: 40px;
}
.text-parent p {
    max-width: 500px;
    font-size: 12px;
    line-height: 20px;
    text-align: justify;
}
.row {
    border: 3px solid green;
    display: table;
    width: 100%;
}
.row > div {
    display: table-cell;
    float: none;
}
.no-padding {
    background-image: url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
    .row > div {
        display: block;
    }
    .no-padding {
        padding: 25% 0;
    }
    .row {
        display: block;
        width: auto;
    }
}

如何使child-div在不使用flexbox的情况下获得其父级的相等高度

1 个答案: