如何佈置一系列跨度，然後是換行符，然後是按鈕？

我在最困難的時候佈局的東西出來是這樣的：如何佈置一系列跨度，然後是換行符，然後是按鈕？

enter image description here

我想要什麼：

數（比如說5）是在一個水平線上的元素（有色上面的圖像）
換行符在酒吧
按鈕

這5個元素應該可以通過javascript訪問，這樣我就可以改變樣式屬性了。背景顏色）。

基本上我的問題是：

我不能讓他們的DIV，否則他們不會是水平（即會出現在紅色和橙色，橙色和黃色之間的換行符等）
如果我讓他們跨越，他們將如上排隊，但之後他們沒有換行符（按鈕之前），即使我把一個<br>或<p>標籤

我該如何處理這些事情？

來源

2015-04-01 Jer

看看CSS中的'display'屬性。 'div'可以做成'inline-block's，'button's可以很容易地做成'block's，你只是指默認值。 – Pevara 2015-04-01 22:45:57

有很多方法可以做，例如浮動，內聯塊，表格單元格，flex等。 – Stickers 2015-04-01 22:47:19

你到目前爲止嘗試過什麼？因此，你需要努力嘗試先解決自己的問題。看到你的問題是一個非常簡單的問題，我認爲你應該能夠通過在線搜索示例來解決這個問題。試着看看CSS的'float'和'display'屬性。如果你嘗試了一些東西，但仍然遇到特定問題，歡迎您發佈這些內容。 – Jasper 2015-04-01 22:49:13

你爲什麼不能讓他們的div？

Here's a Fiddle使它發生。它甚至可以優雅地處理自適應調整大小。

HTML：

<div> 
    <div class="colorbox" style="background: red"></div> 
    <div class="colorbox" style="background: orange"></div> 
    <div class="colorbox" style="background: yellow"></div> 
    <div class="colorbox" style="background: green"></div> 
    <div class="colorbox" style="background: blue"></div> 

</div> 

<br> 
    <button>Button</button>

CSS：

.colorbox { 
    width: 50px; 
    height: 100px; 
    display:inline-block; 
    margin:-3px; 
    border:1px solid; 
}

來源

2015-04-01 22:48:54 bpeterson76

不需要那個'
'。保持你的標記清潔，堅持CSS來造型！ – Pevara 2015-04-01 22:50:38

我以爲我嘗試了所有的東西 - 但是內聯塊是關鍵。（經常內聯是導致在按鈕之前沒有休息的原因）。謝謝！ – Jer 2015-04-01 22:58:21

容易，佩瓦拉.....這不是一個生產就緒的代碼庫（也不是一個堆棧溢出答案曾經的意思）是說明可以完成div定位，如問題問。就我個人而言，我永遠不會發出無風格的按鈕，也不會在生產代碼中內聯樣式。 – bpeterson76 2015-04-02 15:05:02

正如sdcr所說，很多方法！這是其中一個例子。

http://jsfiddle.net/f3xLvdpm/

的HTML：

<div class="red block"></div> 
<div class="orange block"></div> 
<div class="yellow block"></div> 
<div class="green block"></div> 
<div class="blue block"></div> 
<div class="button"> 
    <button>BUTTON</button> 
</div>

而CSS：

.block {float: left; width: 100px; height: 120px;} 
.red {background-color: red;} 
.orange {background-color: orange;} 
.yellow {background-color: yellow;} 
.green {background-color: green;} 
.blue {background-color: bliue;} 
.button {clear: both; padding-top: 20px;}

來源

2015-04-01 22:48:37 sifriday

環繞的跨度與一個div並使用display: block;的DIV，你可以移除BR標籤。

或者您可以使用display: inline-block;作爲span或div標籤。

來源

2015-04-01 22:57:43

如何佈置一系列跨度，然後是換行符，然後是按鈕？

回答

相關問題