div内部改为横向_DIV横向布局的⼏种⽅法
1.使⽤display: inline；将块级元素转变为⾏内元素：
CSS
.item-test{
border: 1px solid black;
div border属性
padding: 7px;
cursor: pointer;
/*display: table-cell;*/
/*float: left;*/
width: 12px;
height:214px;
display: inline;
}
HTML
缺点：虽然可以做到横向布局，但是不能设置宽度和⾼度，padding和margin也是没有⽤，如果需要border就更加不堪⼊⽬：
⽽且，⼀旦你在使⽤了display：inline；的元素内添加块级元素，display：inline就会失效，变回块级元素的效果。
2. 使⽤display: table-cell；模拟table的元素：
这种⽅法⽐第⼀种⽅法要好很多，可以调是⾼度和宽度，padding也可以⽤，但是不能⽤margin(想想也明⽩，对td(table-cell就是模拟td)使⽤margin本来就不⾏)
.item-test{
border: 1px solid black;
padding: 7px;
cursor: pointer;
/*display: table-cell;*/
/*float: left;*/
width: 300px;
height:214px;
display: table-cell;
margin-right: 20px;
}
效果：
缺点：不能使⽤margin
3. 使⽤float浮动属性：
.item-test{
border: 1px solid black;
padding: 7px;
cursor: pointer;
float: left;
width: 300px;
height:214px;
margin-right: 20px;
}
使⽤浮动就⽐上⾯的两种⽅法都要好了， ⾼度和宽度，padding，margin 都能⽤：
缺点：你给他加个⽗元素，并输出⽗元素的border就会发现，⽗元素没有被⼦元素的⾼度撑起来：
.block-live,.block-review{
padding: 0;
border: 1px solid red;
}
个⼈知道的解决⽅法有三个：
1.给⽗元素也添加浮动属性，虽然可以 被⼦元素的⾼度撑起来 ，但是对于⽗元素的同级元素来说，⽗元素的布局就会⾛形，想要保持不⾛形，就得将所有的同级元素添加浮动属性。
2.在最后⼀个元素后⾯添加⼀个任意元素，并添加  clear:both;  ⽤于清除浮动：
3.给⽗元素添加 overflow: hidden；属性：
.block-live,.block-review{
padding: 0;
border: 1px solid red;
overflow: hidden;
}
个⼈认为，这个是最好的⽅法了，既可以被⼦元素的影响，也不会对该元素原来的布局产⽣影响。
配合float⼀起做DIV的横⾏布局最好。
补充：
今天发现float+overflow的⼀个缺点：
场景：需要实现下图这个样的效果：
开始我是如下实现的：
上⾯红框是主要代码：为了实现“⼀段⽂字的两边各有⼀天⽔平线的效果” ，我⽤了绝对定位 将“第三⽅登录”所在div上移13px，有⼀半移除了他的⽗元素。然后实现的效果是那⾯这样，被移除的⼀半消失了，我开始怀疑是显⽰的优先级，就⽤z-index来试了下，当然是不⾏的。
看到overflow:hidden我就醒悟了，被设置了该属性的元素，它所有溢出的内容都会被隐藏。
最后是，去掉了 overflow:hidden ，在最后添加了⼀个元素⽤于清除浮动(即第⼆种让浮动的⼦元素影响⽗元素的⽅法)：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。