如何让父元素定框的img并排在一起

Question

<div style="width:400px;height:600px">
<img style="width:400px;height:600px" />
<img style="width:400px;height:600px" />
</div>

Answer 1

第一种方式：

<img/>不要换行

<img/><img/>
    和
 <img/>
 <img/> 这二种写法是不一样的，第一种二张图片直接没有空格，第二种二张图片中有一个空格。

参考代码

<div style="width:800px;height:600px">//div的width设置800px;就看到效果了。
  <img style="width:400px;height:600px" src="http://img2.imgtn.bdimg.com/it/u=3775263236,2946149902&fm=11&gp=0.jpg" /><img style="width:400px;height:600px" src="http://img2.imgtn.bdimg.com/it/u=3775263236,2946149902&fm=11&gp=0.jpg"/>
</div>

第二种方式：
把img变为块级元素，然后左浮动。

<div style="width:800px;height:600px">//div的width设置800px;就看到效果了。
  <img style="width:400px;height:600px" src="http://img2.imgtn.bdimg.com/it/u=3775263236,2946149902&fm=11&gp=0.jpg" />
  <img style="width:400px;height:600px" src="http://img2.imgtn.bdimg.com/it/u=3775263236,2946149902&fm=11&gp=0.jpg"/>
</div>

div img{
  display:block;
  float:left;
}

Answer 2

一般内部有多个img 的话，较少直接在div下面使用img ，而是借用ul li 元素来实现排列，常见的应用在轮播图的使用中
代码如下

div {
    width:400px; // 宽高为单图的宽高
    height:600px;
    overflow: hidden; // 溢出则隐藏
}
ul {
    width:800px; // 宽度为ul下所有图片宽的总和，高为单图的高
    height:600px;
}
ul > li {
    list-style: none; // 设置li的样式为none，li的排版为浮动，且为left
    float: left; 
}
ul > li > img { 
    width:400px; // 设置单图的宽和高
    height: 600px;
}

<div id="demo">
    <ul>
        <li><img src="img/001.jpg"></li>
        <li><img src="img/002.jpg"></li>
    </ul>
</div>

Answer 3

1. div -> overflow: hidden; img -> float: left;
2. div -> display: flex; img -> flex: 1;

Answer 4

    <div style="width:400px;height:600px; overflow-x: auto; overflow-y: hidden;">
      <div style="width:800px;font-size:0;">
        <img style="width:400px;height:600px" src="http://img2.imgtn.bdimg.com/it/u=3775263236,2946149902&fm=11&gp=0.jpg" />
        <img style="width:400px;height:600px" src="http://img2.imgtn.bdimg.com/it/u=3775263236,2946149902&fm=11&gp=0.jpg"/>
      </div>
    </div>