将图像移动到段落的右侧

Question

大家好，

我现在已经为此苦苦挣扎了几个小时，真的需要一些很好的帮助！在我的网站上，我试图将图像移动到一段文本的右侧。

我的代码片段：

.innercontent {
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 3% 5%;
}

.snap {
    display: inline-block;
}

div.expitem {
    margin: 100px 25px;
    min-height: 300;
    padding: 15px;
}

.text {
    width: 50%;
}

<div class="innercontent">
                <div class="expitem">
                    <h1>'Projectnaam 1'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>
                <div class="expitem">
                    <h1>'Projectnaam 2'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>   
            </div>

出于兼容性原因，我不想使用 float，但如果没有其他办法，我想我应该不得不处理它。预先感谢您尝试回答我的问题！！

Answer 1

您应该尝试使用类似 Bootstrap 的网格系统进行布局，但对于您的代码：

在段落上使用 display: inline-block，因为您要允许一些 space 用于下一个项目。
vertical-align: top 将段落与图像对齐在上面留下一些空隙。
为了在较小的屏幕上对齐，您需要使用媒体查询来减小段落的宽度。

请注意，在进一步缩小屏幕尺寸的同时，图像与底部对齐。这是响应式图像进入的用例。将图像包裹在 % 宽度 div 内，并为图像提供 max-width: 100%、height: auto。如您所见，使用任何网格系统都不会遇到上述困难。

JSfiddle Demo

.innercontent {
  display: inline-block;
  position: relative;
  width: 90%;
  padding: 3% 5%;
}
.snap {
  display: inline-block;
}
div.expitem {
  margin: 100px 25px;
  min-height: 300;
  padding: 15px;
}
.text {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}
@media (max-width: 768px) {
  .text {
    width: 33%;
  }
}

<div class="innercontent">
  <div class="expitem">
    <h1>'Projectnaam 1'</h1>
    <p class="text">
      'Projectomschrijving' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
    </p>
    <a href="#" target="_blank">
      <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
    </a>
  </div>
  <div class="expitem">
    <h1>'Projectnaam 2'</h1>
    <p class="text">
      'Projectomschrijving' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
    </p>
    <a href="#" target="_blank">
      <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
    </a>
  </div>
</div>

Answer 2

我通过向其添加 display: inline-block 更改了 .text class，这似乎将图像推到全屏视图中文本的右侧（使用 Safari 进行测试）。请检查它是否按照您想要的方式工作。

.innercontent {
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 3% 5%;
}

.snap {
    display: inline-block;
}

div.expitem {
    margin: 100px 25px;
    min-height: 300;
    padding: 15px;
}

.text {
    width: 50%;
    display: inline-block;
}

<div class="innercontent">
                <div class="expitem">
                    <h1>'Projectnaam 1'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>
                <div class="expitem">
                    <h1>'Projectnaam 2'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>   
            </div>

Answer 3

您也可以使用 bootstrap 解决问题。

    .innercontent {
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 3% 5%;
}

.snap {
    display: inline-block;
}

div.expitem {
    margin: 100px 25px;
    min-height: 300;
    padding: 15px;
}

.text {
    width: 50%;
}

html 代码 bootstrap

  <div class="innercontent">
            <div class="row">
                <div class="expitem">
                    <h1>'Projectnaam 1'</h1>
                    <div class="col-md-6">
                        <p class="text" >
                            'Projectomschrijving'
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                        </p>
                    </div>
                    <div class="col-md-6">
                        <a href="#" target="_blank">
                            <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                        </a>
                    </div>
                </div>
                <div class="expitem">
                    <h1>'Projectnaam 2'</h1>
                    <div class="col-md-6">
                        <p class="text" >
                            'Projectomschrijving'
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                        </p>
                    </div>
                    <div class="col-md-6">
                        <a href="#" target="_blank">
                            <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                        </a>
                    </div>
                </div>
            </div>   
        </div>

将图像移动到段落的右侧

Moving an image to the right side of a paragraph

html

css

css-position