Question

您好，我正在努力实现理想的外观：

但是，当文本较长或屏幕调整大小时，可能会导致：

任何帮助都会非常感激，因为我花了好几个小时试图让它工作......响应很容易，因为它会出现在文本下并不是并排，但桌面预览只是杀了我！

HTML：

<div class="container-combo white">
        <div class="row-2col-equal-ignore image-combo">
                <div class="column">
                <div class="content">
                <h2>Located at the heart of our community to serve our community</h2>
                <img src="images/bkg-swirl.png" alt="swirl divider" class="swirl">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </div>
                <div class="column">
                <img src="images/bedroom-combo.jpg" class="combo-img">
                </div>
        </div>
</div>

SCSS / CSS：

.image-combo {

.column {
margin-bottom: -5px;

    .content {
        margin: 0 auto;
        text-align: center;
        max-width: 705px;
        padding-top: 61px;
        padding: 61px 10px 10px;

        h2 {
            color: $dark-grey;
            font-size: 34px;
            font-family: $minion;
            line-height: 40px;
            font-weight: normal;
            text-transform: none;
            padding-bottom: 32px;
        }

        p {
            font-size: 15px;
            line-height: 24px;
            text-align: left;
            padding-bottom: 32px;
        }

        .swirl {
            float: none;
            max-width: 456px;
            width: 100%;
            min-width: 1px;
        }
    }

    .flip {
        padding-right: 120px;
        padding-left: 40px;
    }

    .combo-img {
        width: 100%;
        min-height: 426px;
        height: 100%;
    }
}

Answer 1

如果您使用background-image和background-size: cover这样可以使用

＆＃13;

.image-combo {
  display: flex;
}

.column {
  margin-bottom: -5px;
}

.content {
  margin: 0 auto;
  text-align: center;
  max-width: 705px;
  padding-top: 61px;
  padding: 61px 10px 10px;
}

h2 {
  color: $dark-grey;
  font-size: 34px;
  font-family: $minion;
  line-height: 40px;
  font-weight: normal;
  text-transform: none;
  padding-bottom: 32px;
}

p {
  font-size: 15px;
  line-height: 24px;
  text-align: left;
  padding-bottom: 32px;
}

.swirl {
  float: none;
  max-width: 456px;
  width: 100%;
  min-width: 1px;
}

.flip {
  padding-right: 120px;
  padding-left: 40px;
}
.column {
  flex: 1;
  width: 50%;
}
.column.img {
  background-image: url(http://lorempixel.com/500/500/people/10/);
  background-size: cover;
}

＆＃13;

<div class="container-combo white">
  <div class="row-2col-equal-ignore image-combo">
    <div class="column">
      <div class="content">
        <h2>Located at the heart of our community to serve our community</h2>
        <img src="http://placehold.it/200x20" alt="swirl divider" class="swirl">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="column img">
    </div>
  </div>
</div>

＆＃13;

调整使用CSS的大小不起作用

1 个答案: