Question

我的最终用户已决定要将我的一部分内容拆分。我目前看起来像这样：

enter image description here

他们想要的是：

enter image description here

我使用的代码是（这只是一个片段，包含创建此部分布局的重要部分）：

<div style="width:430px;border:1px solid blue;float:left;">
    <asp:Panel ID="Panel6" runat="server" Height="135px" Width="410px">
    <br />
            <table>
            <tr>
                <td width="133">Claim Reprocess Required:</td>
                <td width="30"><asp:DropDownList ID="cboClmReprocReq" runat="server">
                        <asp:ListItem>N</asp:ListItem>
                    <asp:ListItem>Y</asp:ListItem>
                    </asp:DropDownList></td>
                <td width="130">Claim Reprocess Date:</td>
                <td width="98">
                    <input type="text" id="txtClmReprocDt" class="datepicker"  runat="server" style="height: 14px; width: 70px" />
                    &nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td width="133">Issue Closed:</td>
                <td width="30"><asp:DropDownList ID="cboIssueClosed" runat="server" 
                        OnSelectedIndexChanged="cboIssue_closed_onclick" AutoPostBack="True">
                        <asp:ListItem>N</asp:ListItem>
                        <asp:ListItem>Y</asp:ListItem>
                    </asp:DropDownList></td>
                <td width="130">Issue Resolution Date:</td>
                <td width="98">
                    <input type="text" id="txtIssResDt" runat="server" class="datepicker" style="height: 14px; width: 70px" />
                    &nbsp;&nbsp;</td>
            </tr>
        </table>
    </asp:Panel> 

</div>
<div style="width:440px;border:1px solid blue;margin-left: 440px;">
    <asp:Panel ID="Panel5" runat="server" Height="135px" Width="430px">

            <table>
            <tr>
                <td width="138"></td>
                <td width="43"></td>
                <td width="50"></td>
                <td width="20"></td>
                <td width="103"></td>
            </tr>
            <tr>
                <td width="138">Impact Report Required:</td>
                <td width="43"><asp:DropDownList ID="cboImpctRprReq" runat="server">
                    <asp:ListItem>N</asp:ListItem>
                    <asp:ListItem>Y</asp:ListItem>
                </asp:DropDownList></td>
                <td colspan="2" width="120">Date IR Requested:</td>
                <td width="103">
                    <input type="text" id="txtDtIRReq" runat="server"  class="datepicker" style="height: 14px; width: 70px" />
                    &nbsp;</td>
            </tr>
            <tr>
                <td width="138">Date Range of Impact Report:</td>
                <td colspan="2" width="120">
                    <input type="text" id="txtImpRptStDt" runat="server" class="datepicker" style="height: 14px; width: 70px" />
                    &nbsp;</td>
                <td width="20">To:</td>
                <td width="103">
                    <input type="text" id="txtImpRptEnDt" runat="server" class="datepicker" style="height: 14px; width: 70px" />
                    &nbsp;</td>
            </tr>
            <tr>
                <td width="138"></td>
                <td colspan="3">No. Of Claims Impacted:</td>
                <td width="103"><asp:textbox id="txtClmsImpacted" runat="server" Width="70px"></asp:textbox></td>
            </tr>
        </table>
    </asp:Panel> 
</div>
<p></p>
<div style="border:1px solid blue;">
    <asp:Panel ID="Panel7" runat="server" Height="80px" style="margin-left: 19px" Width="860px">
    <br />
        <table>
            <tr>
                <td width="200">Gatekeeper Comments:</td>
                <td width="700" rowspan = "4"><asp:textbox id="Textbox_Gtkpr_Cmmnts" runat="server" 
                        textmode="MultiLine" rows="3" Width="700px"></asp:textbox></td>
            </tr>
        </table> 
    </asp:Panel> 

</div>

每次我搞乱它，我似乎都会创造一个新的格式化噩梦。我甚至尝试过一个简单的<hr>标签，但这并不起作用。如果可能的话，我想通过围绕它创建一个表来做到这一点。

我怀疑这是否重要，但这是在C＃中运行的。但是，它实际上只是一个ASP.Net问题。

有人有任何想法吗？

Answer 1

你可以使用div

http://jsfiddle.net/MKp6f/

<div>
    <table>
        <tr>
            <td width="133">Claim Reprocess Required:</td>
            <td width="30"><asp:DropDownList ID="cboClmReprocReq" runat="server">
                <asp:ListItem>N</asp:ListItem>
            <asp:ListItem>Y</asp:ListItem>
            </asp:DropDownList></td>
            <td width="130">Claim Reprocess Date:</td>
            <td width="98">
            <input type="text" id="txtClmReprocDt" class="datepicker"  runat="server"     style="height: 14px; width: 70px" />
            &nbsp;&nbsp;</td>                    
        </tr>
    </table>
</div>

<div>
    <table>
        <tr>
            <td width="133">Issue Closed:</td>
            <td width="30"><asp:DropDownList ID="cboIssueClosed" runat="server" 
                OnSelectedIndexChanged="cboIssue_closed_onclick" AutoPostBack="True">
                <asp:ListItem>N</asp:ListItem>
                <asp:ListItem>Y</asp:ListItem>
            </asp:DropDownList></td>
            <td width="130">Issue Resolution Date:</td>
            <td width="98">
            <input type="text" id="txtIssResDt" runat="server" class="datepicker" style="height: 14px; width: 70px" />
            &nbsp;&nbsp;</td>
        </tr>
    </table>
</div>

CSS

div{
border-style:solid;
border-width:5px; 
margin: 4px;
}

Answer 2

一些选项而不拆分表等。

在2个输入行之间添加另一行<hr/>，可以实现您的目标：

...
    <table>
        <tr>
            ...
        </tr>
        <tr><td colspan="4"><hr /></td></tr>  <!-- Added this line here -->
        <tr>
            ...
        </tr>
    </table>
...

否则CSS'修复'，1px背景创建行...

HTML

<div class="boxLeft">
    <asp:Panel ID="Panel6" runat="server" Height="135px" Width="410px">
        <table>
            ...
        </table>
    </asp:Panel> 
</div>

CSS

.boxLeft {
    width:430px;
    border:1px solid blue;
    float:left;
    background: url('path-to-image') repeat-x center center;
}

.boxLeft table > tr:last-child {
    margin-top 10px; // or whatever looks right  
}

在<div>中添加水平线，或者水平分割<div>？</div> </div>

2 个答案: