主页 / 问题 / 1057817
Accepted
Ram Ce
Asked:2020-12-12 22:35:16 +0800 CST2020-12-12 22:35:16 +0800 CST

无法排列对象

  • 772

我是网络新手，遇到了这个问题。图片必须在右侧，所有其他元素在左侧。让所有东西在垂直方向上都处于同一水平，但它只是这样出来的，在此处输入图像描述 请帮助解决问题。

.second-part {
  height: 4.67%;
  background-color: white;
  padding: 20px 30px;
  border: 15px dolid black;
  font-weight: 100;
}

.subtitle-for-second-part {
  display: flex;
}

.subtitle-for-second-part h2 {
  text-transform: uppercase;
}

.describe-for-second-subtitle {
  display: flex;
}

.describe-for-second-subtitle p {
  font-size: 12px;
}

.with-button-second-part {
  display: flex;
}

.button-second-part {
  border: 1px solid black;
  border-radius: 35px;
  background-color: white;
}

.with-phone-picture {
  display: flex;
  justify-content: flex-end;
}
<div class="second-part">
  <div class="subtitle-for-second-part">
    <h2>this is bouncy</h2>
  </div>
  <div class="describe-for-second-subtitle">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br> blanditiis praesentium voluptatum deleniti atque corrupti quos <br> dolores et quas molestias excepturi sint occaecati cupiditate non <br> provident, similique sunt in culpa qui officia
      deserunt mollitia <br> animi, id est laborum et dolorum fuga. Et harum quidem rerum <br> facilis est et expedita distinctio. </p>
  </div>
  <div class="with-button-second-part">
    <button class="button-second-part">Read more</button>
  </div>
  <div class="with-phone-picture">
    <img src="res/images/phone-for-second-part.png" alt="phone">
  </div>
</div>

html

1 个回答

  1. Best Answer

    .second-part {
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
}

.subtitle-for-second-part h2 {
  text-transform: uppercase;
}

.describe-for-second-subtitle p {
  font-size: 12px;
}

.button-second-part {
  border: 1px solid black;
  border-radius: 35px;
  background-color: white;
}

.with-phone-picture {
  max-width: 250px;
}

img {
  width: 100%;
  height: 100%;
}
    <div class="second-part">
  <div class="column"> <!-- Добавил -->
    <div class="subtitle-for-second-part">
      <h2>this is bouncy</h2>
    </div>
    <div class="describe-for-second-subtitle">
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br> blanditiis praesentium voluptatum deleniti atque corrupti quos <br> dolores et quas molestias excepturi sint occaecati cupiditate non <br> provident, similique sunt in culpa qui officia
        deserunt mollitia <br> animi, id est laborum et dolorum fuga. Et harum quidem rerum <br> facilis est et expedita distinctio. </p>
    </div>
    <div class="with-button-second-part">
      <button class="button-second-part">Read more</button>
    </div>
  </div>
  
  <div class="column"> <!-- Добавил -->
    <div class="with-phone-picture">
      <img src="https://picsum.photos/200" alt="phone">
    </div>
  </div>
</div>

    • 3

相关问题