将图像移动到段落的右侧

Question

美好的一天，

我现在正在努力解决这个问题几个小时，真的可以使用一些很好的帮助！ 在我的网站上，我试图将图像移动到文本段落的右侧。

我的代码段：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

出于兼容性原因，我不想使用float，但如果没有其他方法，我想我应该处理它。提前谢谢您试图回答我的问题!!

Answer 1

你应该尝试使用像Bootstrap这样的网格系统进行布局，但是对于你的代码：

1. 在段落上使用display: inline-block，因为您要允许 为下一个项目提供了一些空间。

2. vertical-align: top将段落与图像对齐 在它上面留下一些空隙。

3. 为了在较小的屏幕上对齐，您需要使用媒体查询来缩小段落的宽度。

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

JSfiddle Demo

＆＃13;
＆＃13;
.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%;
  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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代码

  <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>