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>의 디스플레이를 인라인, 인라인 블록 또는 인라인 - 플렉스와 같은 인라인 스타일로 변경하기 만하면됩니다.

<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 파일의 헤더를 구성하기

답변

관련 문제