防止浮动左div转到一个新行

防止浮动左div转到一个新行

本文介绍了防止浮动左div转到一个新行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有4个div,设置为左浮动,但结束div保持包装两个更小的屏幕上的新行,这真的很讨厌我...我想让他们缩放屏幕尺寸,所以他们总是留在相同的行,不管屏幕大小...和我尽量不使用表(这是非常诱人的给他们v.reliable这个!!!)



不知道如何解决这个烦人的问题,所以他们总是保持在位置,而不管屏幕尺寸??



我有这个作为我的CSS:

  .wrapper {
margin:0 auto;
width:80%;
display:table-cell;
}
.gridf {
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid {
float:left;
margin-left:3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl {
float:left;
margin-left:3px;
width:200px;
min-height:200px;
border:1px solid white;
}

我的HTML:

 < div style =overflow:hidden;> 

< div class =wrapper>

< div class =gridf>< / div>
< div class =grid>< / div>
< div class =grid>< / div>
< div class =gridl>< / div>

< / div>



< / div>

请帮助:D



  .wrapper {margin:0 auto;宽度:80%; border:solid 1px red; overflow:hidden;}。gridf,.grid,.gridl {Background:green;宽度:24%; min-height:100px; float:left; margin:2px 0;}。gridf {} .grid {margin:2px 1%;} gridl {background:yellow;}  
 < div class =wrapper> < div class =gridf>一个< / div> < div class =grid>两个< / div> < div class =grid>三< / div> < div class =gridl>四< / div>< / div>  


I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)

I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??

I have this as my CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

My HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div>



</div>

Please help :D

解决方案

Hi i think you should this check to this demo

.wrapper {
  margin: 0 auto;
  width: 80%;
  border: solid 1px red;
  overflow: hidden;
}
.gridf,
.grid,
.gridl {
  Background: green;
  width: 24%;
  min-height: 100px;
  float: left;
  margin: 2px 0;
}
.gridf {} .grid {
  margin: 2px 1%;
}
.gridl {
  background: yellow;
}
<div class="wrapper">

  <div class="gridf">One</div>
  <div class="grid">Two</div>
  <div class="grid">Three</div>
  <div class="gridl">Four</div>

</div>

这篇关于防止浮动左div转到一个新行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:25