組織HTML文件的標頭

假設我在html中有一個固定大小的標題，我希望組織四個單獨的對象（儘管對象的類型不是非常重要） - 圖像 - 某些文本 - 一個按鈕 - 另一個按鈕組織HTML文件的標頭

而我希望它們都排成一行，寬度不對稱，那麼以「組織方式」實現這一點最簡單的方法是什麼？假設每個元素的高度都適當大小。我正在尋找一個簡單的解決方案作爲起點。下面是示例代碼是我到目前爲止

<html> 
<body> 
<div id = "container"> 
<div id = "header"> 
<span> <img src = "test.jpg"> <h1> Testing File </h1> 
<button type = "button"> Button1 </button> 
<button type = "button"> Button2 </button></span> 
</div> 
</div> 
</body> 
</html>

來源

2016-07-14 IntegrateThis

爲什麼不把它們浮起來並給它們25％的寬度？ –

你有圖像來解釋它應該是什麼樣子。你在問怎麼寫你的CSS？或者如何組織/構造html元素？ –

研究靈活的佈局（'display：flex'） – Jost

由於<span>表現爲內聯容器，搞亂你的佈局元素是表現爲一個塊元素<h1>。只需將<h1>的顯示更改爲內聯樣式，如內聯，內嵌塊或內聯flex。

<html> 
<head> 
    <style type="text/css"> 
    #header h1 { 
    display: inline; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div id="header" > 
    <span> 
    <img src="test.jpg"> <h1> Testing File </h1> 
    <button type="button"> Button1 </button> 
    <button type="button"> Button2 </button> 
    </span> 
    </div> 
    </div> 
</body> 
</html>

來源

2016-07-14 20:18:43

組織HTML文件的標頭

回答

相關問題