防止浮動left div去換新線

我有4個div設置爲左浮動，但結束div不斷包裝兩個小屏幕上的新線，這真的很煩我......我希望他們能夠縮放與屏幕大小，所以他們總是留在同一行上，無論屏幕大小...和即時嘗試不使用表（這是非常誘人的給他們v.reliable爲此！）防止浮動left div去換新線

我是想知道如何解決這個煩人的問題，所以他們總是保持位置，不管屏幕大小？

我這是我的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

來源

2012-06-05 Sir

只給你的網格div的寬度％嘗試每個div 20％。 – Murtaza

20％不會工作，因爲每個網格也有邊距和邊框。 –

請參考http://jsfiddle.net/sg8FE/例子，將'display：table-cell;'從包裝類替換爲'display：inline'。記得要更新grid grid的div的寬度％ – Murtaza

嗨，我想你應該這樣檢查這個演示

.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>

來源

2012-06-05 04:39:07

謝謝你的作品！ :) – Sir

我看到它正在工作。但我無法看到你所做的改變。我有點新。請有人幫助我。 –

你應該解釋一下，這個答案對其他人來說是沒用的。 – Apolo

你可以嘗試刪除從包裝表格單元顯示規則設置像這樣的子div的百分比（或最小寬度）jsFiddle example。

來源

2012-06-05 03:52:53 j08691

啊這個工作雖然不完全是我的中心......有沒有讓他們很好和居中的訣竅？ – Sir

這應該做的伎倆：

<div class="wrapper"> 
    <div style="width:850px"> 
     <div class="gridf"></div> 
     <div class="grid"></div> 
     <div class="grid"></div> 
     <div class="gridl"></div> 
    </div> 
</div>

這將在任何瀏覽器的支持。 http://jsfiddle.net/5GrKU/3/

來源

2012-06-05 03:55:04 tibo

您的包裝是一個百分比寬度的容器，包含4個固定寬度的子元素。

包裝的寬度取決於視口的寬度。如果視口縮小到包裝的寬度小於4個子元素寬度的點，那麼它們自然不會合適，因此將包裝。

解決的辦法是確保你的包裝不會小於孩子的組合。

因此，加上子元素的寬度，邊框和邊距，然後給包裝一個min-width屬性等於那個。

來源

2012-06-05 04:10:06

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>

CSS

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

爲您引用我也開始加入了演示的URL。 http://jsfiddle.net/sg8FE/

UPDATE

只是在包裝類更改display:inline到display:block其餘全部是正確的，div的居中。

來源

2012-06-05 04:14:31 Murtaza

我怎麼能得到他們中的4個父母div中心？ – Sir

請參閱http://jsfiddle.net/sg8FE/1/你的問題已解決...從包裝類替換'display：inline'到'display：block' – Murtaza

那還不是中心：P – Sir

在你內心的div給出一個固定的寬度，你是迫使他們有一個寬度不管是大小視圖端口。並且給外部div 80％的寬度，您將縮小其視圖端口寬度的大小。您需要爲所有這些div提供固定寬度，或者給所有div賦予相對寬度。

來源

2012-06-05 06:50:53 maksbd19

儘管這是一篇舊文章，但我認爲我也遇到過的問題是，您希望所有這些單元格的大小都固定，而不是％，對嗎？您選擇的解決方案改變了，你指定width:200px;

嗯，我會建議看這裏初始格式：http://jsfiddle.net/gn2bg/

的只有一件事我所做的是增加在你的細胞內包裝材料：

.inwrapper{ 
    float:left; 
    overflow: hidden; 
    min-width: 830px; 
}

和新的HTML，因爲這：

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

請注意，您的包裝需要的空間80％。但是，包裝器會告訴它的尺寸是固定的 - 830px（所有內部尺寸的總和加上填充空間）。這種包裝方式使用'肘部'來拉伸寬度，並覆蓋這80％'包裝'

我知道你已經決定什麼是你最好的解決方案。我將這個迴應留給將來需要確切回答你的確切問題的任何人。

來源

2013-05-31 19:03:54 Grzegorz

防止浮動left div去換新線

回答

相關問題