html - 此结构的 CSS

Question

我已经尝试了一段时间让以下结构与表、 float 、对齐、相对/绝对位置一起玩......但没有成功......

我需要什么 CSS 才能获得它？

我最接近的是使用一个三行的表格，第二行有图表和 A:lalala，但是 B 显示得太靠底部了。

C:lololo (no chart title)
------------
|   chart  |         A: lalalal
|          |         B: lelelele
|__________|

这是带表格的版本

 <table>
                <tr>
                    <td>
                        <b>Check-in: </b>
                        <select id="dates" name="check_in" onchange="dynamicDates(this.value)">
                        <option value="check_in_date">Date</option>
                        <?php echo $dates; ?>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="max-width:400px" id="chart_div"</div>
                    </td>
                    <td>
                        <p><b>Bookings: </b><?php echo $n_bookings; ?></p>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <p><b>Nights: </b><?php echo $nights; ?></p>
                    </td>
                </tr>
            </table>

Answer 1

为了爱所有美丽的事物，请不要使用表格进行布局。

由于我们不知道您的布局(表格除外，我们不会将其用于此答案)，因此有待讨论最佳方法是什么。以下是处理此解决方案的大约十二种不同方法之一:

jsfiddle

HTML:

<div>
    <div class="chart_title">C: This is my title</div>
    <div class="chart">Chart goes here</div>
    <div class="extras">
        <div>A: This is row 1 to the right of chart</div>
        <div>B: This is row 2 to the right of chart</div>
    </div>
</div>

CSS:

.chart_title {
    font-weight: bold;
}

div.chart {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    border: 1px solid blue;
}

div.extras {
    display: inline-block;
    vertical-align: top;
    width: 58%;
    border: 1px solid red;
}