html - 间距标题

Question

我在这里用头撞墙。任何建议将不胜感激。

我想要一个我将在我的页面上使用的页眉，其中图像和文本会发生变化，但样式不会。所有图像均为 399x207，我希望图像左侧的标题框填充空间。我希望标题框的高度为 207 像素。

我尝试了表格(当前版本)和其他方法，但似乎没有什么是我需要/想要的。

这是我请求中奇怪的部分，如果有人回答可以指导/提示而不是为我做的话。这是家庭作业，我很想学习。谢谢!

h1 {
color: #f4ead0;
text-align: center;
}

h2 {
background-color: #5d432c;
color: #f4ead0;
font-size: 1.2em;
text-align: center;
}

table, td {
margin: 0px;
padding: 0px;
border-spacing: 0;
}

#header {
border-radius: 15px;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
}

#wrapper {
border-radius: 15px;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
background-color: #745336;
}
.box {
border-radius: 15px;
border: 2px solid #bd6e02;
text-align: center;
background-color: #745336;  
}

<!-- Header -->
    <div id="header">
        <table style="width:100%">
        <tr>
            <td  class="box" colspan="2">
                <h1>A Brief Discussion of Fractals</h1>
                <h2>The Mandelbrot Set</h2>
            </td>
            <td rowspan="2">
                <img class="box" src="mandelbrot.gif" alt="Part of the Mandelbrot Set">
            </td>
        </tr>
        </table>
    </div>

Answer 1

您是否在 Bootstrap 中尝试过 caption... Check this out .顺便说一句，喜欢你自己学习的精神。您可能还需要应用一些 CSS。