Question

我已经尝试了一段时间来获得以下结构与表，浮动，对齐，位置相对/绝对...但是没有成功......

获得它需要什么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;
}

Answer 2

您可以使用float css属性，如下所示

HTML

<div id='outer'>
    <p>Top Text</p>
    <div class='contents'>
        <div id='chart'>chart</div>
    </div>
    <div class='contents'>
        <ul>
            <li>abc</li>
            <li>abc</li>
        </ul>
    </div>
</div>

CSS

#outer {
    width:300px;
    height:200px;
    background-color:yellow;
}

    .contents {
        background-color:red;
        float:left;
        width:150px;
        display:inline-block;
    }
    #chart {
        background-color:green;
        width:150px;
        height:150px;
    }

小提琴 https://jsfiddle.net/o0ztm1fd/

这个结构的CSS

2 个答案: