Question

您好我正在开发MVC4应用程序。我有一个主div，我有三个div标签。前两个div标签按照我的要求正确显示。但是我的第三个div标签出现在右侧中间。我希望它在左下方。我尝试了所有方法。

<div id="dialog" class="doc-verification-outer">
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
    <div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
    <div id="dialog-form" title="Reject Reason">
        <div style="height:200px;">
            <input type="hidden" value="_upload_id" id="id" />
            <br />
            <label for="name">Select your reason</label>
            <select id="comments">
                <option value="1">Incorrect Document</option>
                <option value="2">document is not clear</option>
                <option value="3">document is not valid</option>
                <option value="4">other document</option>
            </select>
            <input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:right;">
        </div>
    </div>
</div>

有人可以就此提供一些见解吗？非常感谢你......

Answer 1

你可以试试这个：

＆＃13;

<div id="dialog" class="doc-verification-outer">
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
    <div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
    <div id="dialog-form" title="Reject Reason">
        <div>
            <input type="hidden" value="_upload_id" id="id" />
            <br />
            <label for="name">Select your reason</label>
            <select id="comments">
                <option value="1">Incorrect Document</option>
                <option value="2">document is not clear</option>
                <option value="3">document is not valid</option>
                <option value="4">other document</option>
            </select>
            
        </div>
      <div style="margin-top:5px;"><input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="margin-left:122px;"></div>
    </div>
</div>

＆＃13;

Answer 2

我认为你还需要将第三个div分成两个部分，这样右边的部分应该与你的第二个div对齐试试这个：

<div id="dialog" class="doc-verification-outer">
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification">First DIV</div>
    <div id="details" width="30%" style="float:right;height:50%; width:30%">Second div</div>
    <div style="clear:both"></div>
    <div id="dialog-form" title="Reject Reason">
        <div style="height:200px;">
            <div style="width:70%;display:inline-block">
            <input type="hidden" value="_upload_id" id="id" />
            <br />
            <label for="name">Select your reason</label>
            <select id="comments">
            <option value="1">Incorrect Document</option>
            <option value="2">document is not clear</option>
            <option value="3">document is not valid</option>
            <option value="4">other document</option>
        </select>
            </div>
            <div style="width:29%;display:inline-block">
                <input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:left;">
            </div>
        </div>
    </div>
</div>

如何在右下角对齐Div？

2 个答案: