HTML佈局 - 顯示：inline-block的，而不是浮不工作

Sry基因的壞稱號，我不能拿出更多的東西描述...HTML佈局 - 顯示：inline-block的，而不是浮不工作

我有四個類型的內容，每一個在單獨的DIV像這樣：

<div id="item1"> 
    some content 
</div> 
<div id="item2"> 
    some content 
</div> 
<div id="item3"> 
    some content 
</div> 
<div id="item4"> 
    some content 
</div>

我希望把他們這麼＃物品1 &＃ITEM2坐在旁邊彼此的第一行和＃項目3 &＃ITEM4彼此相鄰的第二行（形成正方形一起）。

我知道如何與浮動做到這一點：

#item1, #item3 { 
    float: right; 
}

但我們的老師要在美國使用「顯示：inline-block的」這個網站。我一直試圖找到並回答，但我能想出的唯一的事情就是把項目的套二：

<div id="content1"> 
    <div id="item1"> 
    some content 
    </div> 
    <div id="item2"> 
    some content 
    </div> 
</div> 

<div id="content2"> 
    <div id="item3"> 
    some content 
    </div> 
    <div id="item4"> 
    some content 
    </div> 
</div> 

    #item1, #item2 { 
    display: inline-block; 
    } 

    #item3, #item4 { 
    display: inline-block; 
    }

而且因爲我需要能夠通過單獨移動的元素，這不是一個選項使用媒體查詢：/例如浮動＃item1在主頁上單獨的方向，而＃item2在其他地方移動，我希望你明白我的意思。

編輯要clearify我想要的「檸檬」是「蘋果」下右：https://jsfiddle.net/1hj3L018/1/

來源

2016-01-18 Dinobot

要注意一些空間可能你的元素之間插入。請參閱[如何刪除內嵌塊元素之間的空間？]（http://stackoverflow.com/q/5078239/1529630） – Oriol

您可以使用inline-block的和寬度的百分比：

div{ 
    display: inline-block; 
    width: 50%; 
}

這應該使item1和item2跨越第一行，item3和item4跨越第二行。

編輯：這是如果你真的堅持他們彼此相鄰，之間沒有任何空白。有幾種方法可以做到這一點（請參閱Ryan的回答）。如果你想保留您的格式這裏的另一個伎倆要做到這一點：

<div id="item1"> 
    some content 
</div><!-- 
--><div id="item2"> 
    some content 
</div><!-- 
--><div id="item3"> 
    some content 
</div><!-- 
--><div id="item4"> 
    some content 
</div>

這工作，因爲現在解析器看到的關閉和結束標記之間的一切作爲HTML註釋，而不是一個空白

來源

2016-01-18 00:15:51 Kenneth

我將此標記爲接受的答案以快速填寫。這裏是爲了澄清我的問題，因爲缺乏來自我身邊的信息：/ https://jsfiddle.net/1hj3L018/1/我想讓檸檬在蘋果下正確 – Dinobot

如果沒有漂浮物，你就無法做到這一點。唯一的另一種選擇是使用像石匠這樣的javascript庫：http://masonry.desandro.com/ – Kenneth

Thx Kenneth，我會在那種情況下使用浮動，然後向我的老師評論爲什麼我需要這樣做。 – Dinobot

你可以使用display: inline-block但你應該知道這造成的空白問題。 Here is some info on that。

下面的代碼應該達到的結果，你尋求

div { 
 
    display: inline-block; 
 
    width: 50%; 
 
}

<div id="item1"> 
 
    item 1 
 
</div><div id="item2"> 
 
    item 2 
 
</div><div id="item3"> 
 
    item 3 
 
</div><div id="item4"> 
 
    item 4 
 
</div>

來源

2016-01-18 00:20:11

HTML佈局 - 顯示：inline-block的，而不是浮不工作

回答

相關問題