间距标题

Question

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

我想要一个我将在我的页面上使用的标题，其中图像和文本将会改变，但样式不会。所有图像都是399x207，我想要图像左侧的标题框来填充空间。我希望标题框高207px。

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

这是我的请求的奇怪部分，如果有人回答可以指导/暗示而不是为我做这件事。它是家庭作业，我热衷于学习。谢谢！

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。 BTW，就像你自己的精神一样。您可能还需要应用一些CSS。

Answer 2

这可能有用，虽然我还没有测试过。

首先，让第一个<td> 100％宽，因此它会尝试适应整个表格，第二个<td>上的内容将会崩溃。

接下来，在white-space:nowrap上放置一个<tr>，这样其中的任何内容都不会崩溃。

<div id="header">
    <table style="width:100%" border=1>
    <tr style="white-space:nowrap">
        <td  class="box" colspan="2" width="100%">
            <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>