主页 / 问题 / 809736
Accepted
kekik
Asked:2020-04-05 05:09:56 +0000 UTC2020-04-05 05:09:56 +0000 UTC

如何将文本和图像对齐到同一水平！

  • 772

https://codepen.io/mustafich/pen/NYLgbB
需要图片在右边，文字在左边！

如照片所示

在此处输入图像描述

<div class="home1">
<div class="container">
        <div class="home1-content">
            <div class="row">
                <div class="col-md-6">
                    <div class="home1-colum">
                        <div class="home1-colum-kartinka">
                                <img src="site/img/audio.png" alt="">
                        </div>
                            <div class="home1-colum_text">
                                <h3>Привет всем</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam velit adipisci voluptatem enim nulla delectus quam sed dolore, veritatis, doloremque ipsam laudantium repudiandae accusamus quibusdam minus ipsum dolor maxime error.</p>
                            </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="home1-colum">
                        <div class="home1-colum-kartinka">
                                <img src="site/img/audio.png" alt="">
                        </div>
                            <div class="home1-colum_text">
                                <h3>Привет всем</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam velit adipisci voluptatem enim nulla delectus quam sed dolore, veritatis, doloremque ipsam laudantium repudiandae accusamus quibusdam minus ipsum dolor maxime error.</p>
                            </div>
                    </div>
                </div>
            </div>

        </div>

html

2 个回答

  1. Best Answer

    .home1 {
  background-color: #dadfe1;
}

.home1-colum-kartinka {
  width: 140px;
  height: 140px;
  float: right;
}

.home1-colum-kartinka img {
  width: inherit;
  height: inherit;
}

.home1-colum_text {
  text-align: right;
  padding-right: 22px;
  overflow: hidden;
}

.home1-colum_text h3 {
  line-height: 22px;
}

.home1-colum_text p {
  font-size: 15px;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="home1">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="home1-colum">
          <div class="home1-colum-kartinka">
            <img class="img-thumbnail" src="https://i.ebayimg.com/images/g/Jh0AAOSw2WBZhoG2/s-l300.jpg" alt="">
          </div>
          <div class="home1-colum_text">
            <h3>Привет всем</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam velit adipisci voluptatem enim nulla delectus quam sed dolore, veritatis, doloremque ipsam laudantium repudiandae accusamus quibusdam minus ipsum dolor maxime error.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="home1-colum">
          <div class="home1-colum-kartinka">
            <img class="img-thumbnail" src="http://capelino.com/wp-content/uploads/2016/07/a4d907953f0111038b34ccc60846c7b4.jpeg" alt="">
          </div>
          <div class="home1-colum_text">
            <h3>Привет всем</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam velit adipisci voluptatem enim nulla delectus quam sed dolore, veritatis, doloremque ipsam laudantium repudiandae accusamus quibusdam minus ipsum dolor maxime error.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    • 4

  2. 弹性解决方案：

    .home1 {
  background-color: #dadfe1;
}
.home1-colum {
  display: flex;
}
.home1-colum-kartinka {
  display: flex;
  flex-shrink: 0;
  background-color: red;
  width: 125px;
  height: 125px;
}
.home1-colum_text {
  padding: 0 15px;
}
.home1-colum_text p {
  font-size: 15px;
}
    • 2

相关问题