Question

我正在使用FlexBox创建一个多列表单模板。

我的中心DIV宽度为66.7％。

我正在寻找一种方法来设置一个边框，根据中心div内的内容调整大小（并不像示例中那样包围整个DIV）

有没有办法实现它？

CodePen：https://codepen.io/dsomekh/pen/NjRQjK

<html>
<style>
input:([type=radio]){
    min-width:10px;
}


.page{
    display:flex;
    /*border: 5px solid orange;*/
}

.left{
    width:33.3%;
    /*border: 5px solid pink;*/
}
.center{
    width:66.7%;
    border: 2px solid skyblue;
}

.row_title{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    /*border: 5px solid skyblue;*/
}

.row_input{
    display:flex;
    margin-bottom:1%;
    align-items:flex-start;
    flex-direction:row;
    /*border: 5px solid skyblue;*/
}

.cell_right_Radio{
    max-width:300px;
    overflow:auto;
    flex-direction:column;
    display:flex;
    flex-direction:row
    flex-wrap:wrap;


}

.cell_right_CB{
    max-width:300px;
    overflow:auto;
    display:flex;
    justify-content:flex-start;
    flex:1;

}

.cell_right{
    max-width:300px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    flex:1;

}

.cell_left{
    margin-right:10%;
    max-width:300px;
    overflow:auto;
    flex-direction:column;
    display:flex;
    flex:1;

}

.option{
    margin-top:2%;
    display:flex;

}
</style>

<div class="page">
    <div class="left"></div>
    <div class="center">
            <div class="row_title">
                    <div class="cell_left">By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions</div>
                    <div class="cell_right">Reason for clone</div>
            </div>
                <div class="row_input">
                    <div class="cell_left"><input type="text" name="phone"></div>
                    <div class="cell_right"><input type="text" name="phone"></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">Name</div>
                    <div class="cell_right">Email</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><textarea rows="12" cols="100"></textarea></div>
                    <div class="cell_right"><input type="text" name="phone"></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">Title</div>
                    <div class="cell_right">Company</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><input type="text" name="phone"></div>
                    <div class="cell_right"><input type="text" name="phone"></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">Reseller</div>
                    <div class="cell_right">Reason for clone</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><input type="text" name="phone"></div>
                    <div class="cell_right_Radio"><div class="option"><input type="radio" style="min-width:13px!important" name="gender" value="male">Hardware change</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">Unknown</div><div class="option"><input  style="min-width:13px!important" type="radio" name="gender" value="male">Version upgrade</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">New physical host</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">Other</div></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">Support person email Support person email Support person email</div>
                    <div class="cell_right">By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><input type="text" name="phone"></div>
                    <div class="cell_right_CB"><input type="checkbox" name="vm" onclick="Onvm(this)"></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">Virtual machine platform</div>
                    <div class="cell_right">Virtual machine clusterd (Hosted on multiple servers)</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><input type="text" name="phone"></div>
                    <div class="cell_right"><input type="text" name="phone"></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">TeamViewer ID</div>
                    <div class="cell_right">TeamViewer Password</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><input type="text" name="phone"></div>
                    <div class="cell_right"><input type="text" name="phone"></div>
                </div>
                <div class="row_title">
                    <div class="cell_left">Screenshot</div>
                    <div class="cell_right">By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions</div>
                </div>
                <div class="row_input">
                    <div class="cell_left"><input type="file" name="screenshot"></div>
                    <div class="cell_right"><input type="text" name="phone"></div>
                </div>

        </div>

</div>

Answer 1

为什么不删除.center中的宽度？它会根据内容自动调整表单宽度。

.center{
    /*width:66.7%;*/
    border: 2px solid skyblue;
}

您还可以使用min-width为表单指定最小宽度。

Updated Codepen

CSS - 根据内容的动态边框

1 个答案: