堆栈内存溢出
  简体   繁体   English

如何在右边的内容上制作图像，并在较小的屏幕尺寸时响应？

[英]How to make image on left content on right and responsive when at smaller screen size?

 原文  2016-08-30 03:20:45  0   3    html/ css/ twitter-bootstrap/ responsive

问题描述

I am trying to create something like image on left and content on right and alternate order. 我正在尝试创建左边的图像和右边的内容以及替代顺序。 As you can see my picture below the second one of the image is not on the right side. 正如你可以看到我的图片下面的第二张图片不在右侧。 And is not responsive on smaller screen size. 并且对较小的屏幕尺寸没有响应。 Please help! 请帮忙！

在此输入图像描述

Here is my code: 这是我的代码： 

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

        <title>Example</title>

    <style>
    body {
      margin-top: 50px;
    }

    .img-1 {
      height: 250px;
      width: 350px;
      margin: 10px 50px;

    }


    </style>

      </head>
      <body>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6" >
                  <img class="img-1" src="img-1.jpg">
                </div>
                <div class="col-md-4 col-sm-4">
                     <h3>h3 title</h3>
                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                        augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                        tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                        massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                        eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6" >
                  <img class="img-1" src="img-1.jpg">
                </div>
                <div class="col-md-4 col-sm-4">
                     <h3 class="">h3 title</h3>
                    <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                        augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                        tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                        massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                        eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>
        </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

      </body>
    </html>

And this is not responsive on smaller screen size, How can I fix it? 这对较小的屏幕尺寸没有响应，我该如何解决？

在此输入图像描述

Your help much appriciate! 你的帮助很多appriciate！

3 个解决方案

解决方案1
 0  2016-08-30 03:42:57

To switch the order so the picture is on the right, in your second row the first div with the class="col-md-6 col-sm-6" should have the h3 and p in it, and then the second div in that row with class="col-md-4 col-sm-4" should have the img in it. 要切换顺序，使图片在右边，在第二行中，第一个div为class =“col-md-6 col-sm-6”，其中应包含h3和p，然后是第二个div class =“col-md-4 col-sm-4”的那一行应该有img。 To make the images responsive, add the "img-responsive" class in the img tags, and make the height and width you defined in the CSS a max-height or max-width so the images can scale down to a smaller height/width to fit in smaller screens. 要使图像响应，请在img标签中添加“img-responsive”类，并使CSS中定义的高度和宽度为最大高度或最大宽度，以便图像可以缩小到更小的高度/宽度适合较小的屏幕。

解决方案2
 0  2016-08-30 06:09:41

Use can use .col-sm-push-* and .col-sm-pull-* to switch the ordering of grid columns. Here is reference: 使用可以使用.col-sm-push-*和.col-sm-pull-* to switch the ordering of grid columns. Here is reference: .col-sm-pull-* to switch the ordering of grid columns. Here is reference: http://getbootstrap.com/css/#grid-column-ordering . .col-sm-pull-* to switch the ordering of grid columns. Here is reference: http .col-sm-pull-* to switch the ordering of grid columns. Here is reference: //getbootstrap.com/css/#grid-column-ordering 。

To make the images responsive, add the "img-responsive" class in the img tags. 要使图像响应，请在img标记中添加“img-responsive”类。 

 .img-1{ margin-bottom:20px; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-6" > <img class="img-1 img-responsive" src="https://pioneerwoman.files.wordpress.com/2010/11/springy-flower-pot-desserts1.jpg"> </div> <div class="col-sm-4"> <h3>h3 title</h3> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-push-4" > <img class="img-1 img-responsive" src="http://www.blog.designsquish.com/images/uploads/jason-whatever-flower-pots.jpg"> </div> <div class="col-sm-4 col-sm-pull-6"> <h3 class="">h3 title</h3> <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p> </div> </div> </div>

解决方案3
 0  2016-08-30 06:38:30

See if this helps. 看看这是否有帮助。

Please click the link to see how it works. 请单击链接以查看其工作原理。 https://jsfiddle.net/2d7vab0t/ https://jsfiddle.net/2d7vab0t/

HTML: HTML： 

<img class="img-1" src="img-1.jpg" width="350px" height="250px">
     <div id="container">
     <h3>h3 title</h3>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                    </div>

<div id="container2">
<img class="img-1" src="img-1.jpg"  width="350px" height="250px">

   <h3 class="">h3 title</h3>
       <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
  </div>

CSS: CSS： 

 body {
  margin-top: 50px;
}

.img-1 {
  border: 1px solid black;
  max-width: 50%;
  margin: 10px 50px;

}

@media only screen and (min-width:768px) {
img {float: left;}
#container2 {clear: left;}
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使div左右保持2 div的div取决于屏幕大小 - how to make responsive a div holding 2 divs in the right and left with image depending on screen size 如何使图像左对齐和内容右对齐？ - How to make image aligned left and content right? 如何使标题内容具有响应性（小屏幕时，将标题图像堆叠在content div顶部） - How to make header content responsive (stack header image on top of content div when small screen) 如何使我的内容在水平和垂直方向上都能响应屏幕尺寸？ - How to make my content responsive to screen size both horizontally and vertically? 如何仅在屏幕较小时向右浮动，而在屏幕较大时向左浮动？ - How do I float right only when screen is smaller but float left when screen is bigger? 使全屏图像内容响应并占据屏幕左对齐的1/3 - Make full screen image content responsive and take up 1/3 of screen left align 当屏幕尺寸变小时，如何使按钮不调整宽度？ - How to make the button not resize in width when the screen size gets smaller? 即使屏幕变小，如何保持整个图像大小 - How to keep the whole image size even when screen gets smaller 如何使这些表格具有响应性，并在屏幕尺寸变小时使它们堆叠起来？ - How can I make these tables responsive and have them stack up once the screen size gets smaller? 如何使图像在 Django 的每个屏幕尺寸中响应 html 和 CSS？ - How to make the image responsive with html & CSS in every screen size in Django?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM