html - 在 div 中放置日期选择器、表格和超链接

Question

我有一个设计，我需要在页面最左侧放置一个日期选择器，然后放置一个表格，其宽度从日期选择器到网页末尾，高度为 500px。在日期选择器的下方和表空间的左侧，我需要放置超链接。但我做不到。要么是表出现故障，要么是超链接。

我在这里附上一张粗略的图片，表示我的要求..

这是我的 html 代码..

//Datepicker 

<div id="datepicker" style="float:left;margin-left:5px;margin-top:20px;width:166px"></div>

//Hyperlink

<div style="float:left;margin-left:5px; margin-top:5px; width:166px">

    <label name="roomOperation" id="roomOperation" style="font-style:normal;margin-left:20px; 
                       font-size:14px;font-weight:bold;">Room Operation</label>

    </br>
    </br>

    <a href="#" onclick="addTab('google','http://www.google.com')">Check in List</a> 

    </br>
    </br>

    <a href="#" onclick="addTab('google','http://www.google.com')">Check out List</a> 


</div>

//dynamic tab table

<div id="tt" class="easyui-tabs" style="margin-left:200px; margin-top:5px;width:1024px;height:768px;">
    <div title="Home" style="padding:20px">
        <p>Click the above button to add a new tab panel.</p>
    </div>
</div>

请帮帮我..

提前致谢..

Answer 1

我在这里创建了示例代码看看Demo

您可以使用日期选择器代替选择框。

<div style="width:20%;height:300px;float:left;border:1px solid">
    <select style="width:100%">
        <option>1</option>
        <option>1</option>
        <option>1</option>
    </select>
    <a href="#" style="display:block">link</a>
    <a href="#" style="display:block">link</a>
    <a href="#" style="display:block">link</a>
    <a href="#" style="display:block">link</a> 
    <a href="#" style="display:block">link</a>
    <a href="#" style="display:block">link</a> 
    <a href="#" style="display:block">link</a>
    <a href="#" style="display:block">link</a> 
</div>
<div style="width:79%;height:300px;float:left;border:1px solid">
    <table width="100%" border="1">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</div>