響應網站的浮動div

我想爲響應式網站浮動div，並且它無法正常工作。我需要它們按照下面的順序排列，因爲當屏幕變小時，它們需要先堆疊1，然後是2，堆疊3.第三個div在第一個div下面不會很好。任何幫助表示讚賞！響應網站的浮動div

<div class="1">info</div> 
<div class="2">info</div> 
<div class="3">info</div> 

.1 { 
width:23%; 
float:right; 
} 
.2 { 
width:76%; 
float:left; 
} 
.3 { 
float:right; 
width:23%; 
}

再說一遍，我需要「3」在「1」之下，但它在「2」之下。謝謝！

來源

2015-04-01 Amanda

這並沒有幫助，它只是將它推到「2」以下。這是在dev網站上，訪問受IP限制。 – Amanda 2015-04-01 11:24:01

您是否嘗試過使用媒體查詢並在移動設備上查看時清除div？給他們所有的100％的寬度，並明確：兩者。然後它們應該堆疊在彼此的頂部。 – Lee 2015-04-01 11:54:39

Css類不應以數字開頭。

Demo

.one { 
width:23%; 
float:right; 
} 
.two { 
width:76%; 
float:left; 
} 
.three { 
float:right; 
width:23%; 
}

來源

2015-04-01 11:16:28

這只是一個例子。真正的班級有一個名字。 – Amanda 2015-04-01 11:17:39

當你改變右側和左側。我會工作。我更新了小提琴。 – 2015-04-01 11:21:29

我想這是你想要Demo

* { 
     box-sizing: border-box; 
    } 
    .one { 
     width:23%; 
     float:left; 
    background-color: #333; 
    } 
    .two { 
     width:76%; 
     float:left; 
     background-color: #666; 
    } 
    .three { 
     float:left; 
     width:23%; 
     background-color: #ddd; 
    }

來源

2015-04-01 11:25:35

我猜使用內聯塊將正常工作。即使您調整窗口大小而不使用百分比寬度。

.one { 
    width:23%; 
    display: inline-block; 
    color: yellow; 

} 
.two { 
    width:76%; 
    display: inline-block; 
    color: orange; 
} 
.three { 
    display: inline-block; 
    color: red; 
    width:23%; 
}

Demo

來源

2015-04-01 11:50:46 Presse

謝謝，但沒有奏效。 – Amanda 2015-04-01 14:20:49

你的代碼是正確的，但CSS類不能啓動或只包含一個數字。 DIV.two不NEDD浮動：

<div class="one">info 1</div> 
<div class="two">info 2</div> 
<div class="three">info 3</div>

而CSS：

.one { 
width:23%; 
float:right; 
background-color: yellow; 
} 
.two { 
width:76%; 
background-color: grey; 
} 
.three { 
float:right; 
width:23%; 
background-color: red; 
}

See the fiddle。

來源

2015-04-01 12:34:57

響應網站的浮動div

回答

相關問題