2016-07-14 2 views
0

Предположим, у меня есть заголовок фиксированного размера в HTML, где я хочу организовать четыре отдельные объекты (хотя тип объектов не супер важно) - изображение - некоторый текст - a кнопка - другая кнопкаорганизация заголовок 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> 
+0

Почему бы просто не поплавать ими и не дать им ширину 25%? –

+0

У вас есть изображение, чтобы объяснить, как оно должно выглядеть. И вы спрашиваете, как написать свой css? или как организовать/структурировать элементы html? –

+0

Посмотрите на гибкие макеты ('display: flex') – Jost

ответ

1

Поскольку <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> 
Смежные вопросы