CSS对齐将％width与硬px结合

Question

我对网页设计很陌生。 我对其中一种对齐方式有疑问，无法弄清楚该如何解决。 我有display:table个元素都设置有％，最后一个<div>除外，后者必须是不可调整大小的按钮。

我想要的是固定其位置，并在调整大小时将其保留在容器和文本字段的同一空间中

全屏显示：

调整大小后会发生以下情况：

请记住，HTML是由程序呈现的，而CSS必须仅是内联的。

Code snippet

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">

<form>
<div class="container" style="display:table;border-collapse:collapse;background-color: #F8F8F8;width:98.83%;max-width:1511px;">
                <div style="display:table-row;">

                    <div style="display:table-cell;width:37%;background-color:#EDEDED;border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;padding:6px 4px 4px 0px;">
                        <div class="col-xs-3" style="width:11.75%;min-width: 65px;">
                            <label>3.</label></div>
                        <div class="col-xs-9" style="width:79.3%;padding-left:0;padding-right:0;">
                            <label>Operator PIC full style, if any, and DPA contact details</label>
                        </div>

                    </div>

                    <div style="display:table-cell;padding:6px 4px 0px 10px;">
                        <div class="row form-group" style="margin-bottom: 0;">
                            <div class="col-xs-11" style="width:90.2%;">
                                <q360 q="192" s="1" name="in192" title="3. Operator PIC full style, if any, and DPA contact details"
                                    class="form-control input-sm" style="resize: none" />
                            </div>
                            <div class="col-xs-1" style="padding-left:-2%">
                                <c360 class="btn btn-warning" style="width:40px;height:30px" q="192" title="1.1 Date Updated" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>

Answer 1

我找到了解决方法。 我从包装标签和所有引导程序中删除了display：table-cell。 之后，我使用Calc（）;功能相应地调整输入宽度。 谢谢大家的帮助。