如何在移动屏幕上的文本顶部对齐右侧图像

Posted 2023-03-06

【中文标题】如何在移动屏幕上的文本顶部对齐右侧图像

【英文标题】：how to align right hand side image on top of text on mobile screen

【发布时间】：2016-04-02 05:38:40

【问题描述】：

我在网页上有两行：在第一行，图像在左侧，文本在右侧。对于第二行，反之亦然。当我在移动设备上查看页面时，左侧的图像位于文本的顶部，右侧的图像位于文本的底部。

我希望所有图像都位于文本的顶部，无论是在屏幕的右侧还是左侧。

我该怎么做？

HTML 代码

<section class="pagecontent first_row" id="pagecontent">
    <div class="container">
        <div class="row">
            <div class="col-md-5 text-center animated wow fadeInLeft">
                <div class="iphone1">
                    <img src="images/image1.png"  titl="">
                </div>
            </div>

            <div class="col-md-7 animated wow fadeInRight">
                <div class="features_list1">
                    <h1 class="text-uppercase">Text on Right</h1>
                    <p>Some text</p>
                </div>                  
            </div>
        </div>
    <hr class="style3">
    </div>
</section>

<section class="pagecontent second_row" id="pagecontent">
    <div class="container">
        <div class="row">
            <div class="col-md-7 animated wow fadeInLeft">
                 <div class="features_list1">
                     <h1 class="text-uppercase">Text on Left</h1>
                     <p>Some text</p>
                </div>  
            </div>

            <div class="col-md-5 text-center animated wow fadeInRight">
                <div class="iphone1">
                    <img src="images/image2.png"  titl="">
                </div>  
            </div>
        </div>
        <hr class="style3">
    </div>
</section>

一些 CSS 代码

.pagecontent .iphone1
    max-width: 359px;
    position: relative;
    display: inline-block;
    text-align: center;


.pagecontent .iphone1 img
    width: 100%;
    height: auto;
    padding-bottom: 15px;

 .pagecontent .features_list1 p
    color: #767272;
    font-family: "open_regular", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 19px;
    text-align: justify;

任何帮助都会很有用。

【问题讨论】：

如果包含一些代码会更好。没有你的页面结构，就很难回答

@abhishekkannojia 我已经添加了 html 代码。请检查。

如果您的要求只是在移动屏幕的情况下图像应位于文本顶部，您只需将包含image2 的div 移动到文本div 之前。看到这个fiddle

@abhishekkannojia 是的，但我希望桌面右侧的图片应该放在移动设备上的文本顶部。

【参考方案1】：

col-push-* 和 col-pull-* 可以帮助您

<div class="container">
  <div class="row">
    <div class="col-md-5 text-center animated wow fadeInRight col-md-push-7">
  <div class="iphone1">
    <img src="http://placehold.it/150x150"  titl="">
  </div>
</div>

<div class="col-md-7 animated wow fadeInLeft col-md-pull-5">
  <div class="features_list1">
    <h1 class="text-uppercase">Text on Left</h1>
    <p>Some text</p>
  </div>
    </div>
  </div>
</div>

你可以在JSFiddle看到这一点

【讨论】：

我不知道引导程序的 col-push-* 和 col-pull-* css。我明白了你的意思，我已经调整了我的 html 以获得所需的结果。非常感谢您的帮助:)