我需要一个答案：bootstrap 3 这是一份工作申请？

Question

为了找工作，招聘人员让我解决这个问题，才能得到这份工作！这里的问题 html :

<div id="header" class="col-md-12">header</div>


    <div id="content" class="col-md-12 clearfix">
        <img src="1.jpg" class="changeme">
        <img src="2.jpg" class="changeme">
    </div>

<div id="footer" class="col-md-12">footer</div>

这里是问题的CSS：

#header,
       #footer{
            width: 100%;
            height: 50px;
            background: red;
            text-align: center;
        }

        body img{
            float:left;
        }
        body img:nth-child(2n){
            float: right;
        }`

使用 bootstrap 3.7.0.

我必须只使用 class!

在这里查看问题： The jsFiddle of the problem

Answer 1

这里有一个 jsfiddle。您希望仅通过添加 class 来发生这种情况，所以它就在那里。在第二张图片中添加 class pull-left 并且这是固定的。

  <div id="header" class="col-md-12">Header</div>
     <div id="content" class="col-md-12 clearfix">
       <img class="changeme " src="http://uteek.net/test/1.jpg">
       <img class="changeme pull-left" src="http://uteek.net/test/2.jpg">
     </div>
  <div id="footer" class="col-md-12">Footer</div>

Answer 2

将 img 标签中的 class 更改为：

 <img class="pull-left" src="http://uteek.net/test/1.jpg">
<img class="pull-left" src="http://uteek.net/test/2.jpg">

如果这是它所需要的或者你可以只更改底部的 img 标签

Answer 3

我自己找到结果只是为了好玩，这里是解决方案：

body img {
    float: left;  
}
body img:nth-child(2n) {
   float: right;
}

#content{display:flex;text-align:center;width:100%}

.changeme1{
   margin-left:auto;float:none;
}
.changeme2{
   margin-right:auto;float:none;
}

我需要一个答案：bootstrap 3 这是一份工作申请？

i need an answer please : bootstrap 3 this is for a job applyment?

html

css

jquery

clearfix

twitter-bootstrap-3