簡單的問題：CSS頁面佈局

忍受我，我現在會發表一個愚蠢的問題。作爲網頁設計的業餘愛好者，我不完全理解CSS。具體來說，如何在水平面上安排物體。簡單的問題：CSS頁面佈局

現在，虛線<'p>'框位於空的<'div>'框下方。我想把它們水平放在一起。如何去做呢？

<html><head><style> 
#div1 
{width:400px; height:75px;border:4px solid;} 
</style></head><body> 

<div id="div1"></div> 

<p style="border-style:dashed;border-width:2px;height:30px;width:396px;text-align:center;">Move me</p> 

</body></html>

來源

2015-10-17 HungryHippo

不要難過，你有沒有掌握CSS佈局，但 - 它已經很長一段時間在標準支持方面的到來，所以大多數方法目前使用稍微哈克方法acheive它並不總是不言而喻的，他們如何工作或爲什麼。

默認情況下，塊垂直堆棧，所以你想改變流水平運行一個特定的部分。

適當的「現代CSS方式」將使用flexbox，這是特別針對這些類型的情況（和更多）的佈局工具。警告是瀏覽器支持 - IE10及以上，但否則大多數每個瀏覽器都支持它。

要使用flexbox水平放置某些東西，您需要告訴父級成爲水平定向的容器。在你的情況下，因此可能是一個好主意來包裝兩個元素在另一個元素：

<div class="wrapper"> 
    <div id="div1"></div> 
    <p>Move me</p> 
</div>

你再告訴包裝成爲「柔性容器」，在默認模式是週轉箱水平相當不是垂直：

.wrapper { 
    display: flex; 
}

有在歷史上一直幾個實驗Flexbox的實現與不同的語法，所以這是一個需要注意的太（參見後面的示例）。下一步將是如何確定盒子的大小，如果您希望它們的大小不同於內容的大小 - 這將是學習flexbox的下一步。 :-) 你需要知道的第一件事是，在這種情況下，他們仍然會對width財產做出反應，否則就會變得同樣高。

如果您想要更廣泛的瀏覽器支持，您可以將flexbox與不適合此確切目的但仍然可行的其他方法結合使用 - 浮動或內聯塊會想到。關於flexbox的好處是，它忽略了其子項的display模式和float屬性。這意味着我們可以結合新舊技術。

浮動最初旨在將圖像或其他圖形放置在文本塊的右側或左側，例如，但可用於創建具有一定工作量的整個佈局。他們有一些複雜的行爲需要一段時間才能掌握。例如，由於默認情況下，浮動器會垂直伸出其容器，所以通常需要添加使包裝器包含浮動器的內容 - 最簡單的方法可能是將overflow: hidden應用於包裝器。
內聯塊基本上允許文本流中的塊級元素，但由於文本水平流動（至少英文版），因此您可以選擇它們來創建完整的水平佈局。缺點是HTML源代碼中的任何空格（包括換行符）都會在水平項目之間創建空白。

如果你去浮路線，示例代碼可能是這個樣子：

.wrapper { 
    /* various flexbox syntaxes, old */ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    /* modern flexbox syntax */ 
    display: flex; 
    overflow: hidden; /* contain floats */ 
} 

.wrapper p, 
#div1 { 
    float: left; /* will be ignored by modern browsers */ 
}

來源

2015-10-17 17:48:12 Emil

Tusen粘性埃米爾！ Du skriverpåettlättförståeligtsätt，until skillnadfrånmångaandra「tutorials」pånätet。 – HungryHippo

Det varsåliteså，@HungryHippo。 :-) Markeragärnasvaret som receterat om du ducker det besvarar dinfråga。 – Emil

可以設置display（串聯，或內聯塊）

內嵌元素不啓動一個新的行和只佔用作爲多寬度是必要的。

CSS

#div1, p{ 
display: inline-block; 
}

DEMO HERE

來源

2015-10-17 16:52:16

您應該設置display到inline-block他們。檢查這個fiddle。

你也可以將它們設置爲vertical-align: top（再看一次小提琴），它們將被排列在最前面。

現在<p>略低於<div>。設置margin爲p到0進行更改。

來源

2015-10-17 16:52:27

使用float：留下第一格

{width：400px;向左飄浮;高度：960x75像素;邊界：4PX固體;}

來源

2015-10-17 16:54:08 ookie

我個人做的方式是一個包裝同時添加到這些元素，並用文本方式將它們對齊文本對齊

<div id="wrapper"> 
    <div id="div1"></div> 

    <p style="border-style:dashed;border-width:2px;height:30px;width:396px;text- align:center;">Move me</p> 
</div>

再加入一些CSS到包裝：

#wrapper { 
    text-align:center; 
}

來源

2015-10-17 16:55:06

簡單的問題：CSS頁面佈局

回答

相關問題