HTMLファイルのヘッダーを整理する

HTMLの固定サイズのヘッダーを4つの別々のオブジェクトを整理したいとします（オブジェクトのタイプは重要ではありません）。 - ボタン - 別のボタンHTMLファイルのヘッダーを整理する

そして、私はそれらをすべて非対称の幅で一列にしたいと思います。これを「組織的に」達成する最も簡単な方法は何でしょうか？各要素の高さが適切な大きさであると仮定する。私は出発点として簡単な解決策を探しています。ここで私は、インラインコンテナとして<span>振る舞うので、

<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

これまで持っているもののサンプルコードは、あなたのレイアウトをめちゃくちゃ要素はブロック要素として振る舞う<h1>です。 <h1>の表示を、インライン、インラインブロック、インラインフレックスなどのインラインスタイルに変更するだけです。

<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ファイルのヘッダーを整理する

答えて

関連する問題