想要在CSS中设置相对于Div的控件宽度

Question

我有一个场景，我需要显示一个基于div控件的输入按钮对齐.div的宽度会有所不同所以我想要相对于div宽度我的输入按钮将设置它的宽度。这里我要粘贴两张图片

图片1： -

在第一张图片中，div的宽度为100px，因此 save 和 close 按钮必须放在网格上方，如此处所示。如果div的宽度增加，那么输入按钮必须随之移动。

图片2： -

在第二种情况下，如果div宽度增加，则按钮位置以div宽度移动。

编辑： -

<div class="outer">
        <input id="Submit1" type="submit" value="Save" />
        <input id="Submit2" type="submit" value="Close" />
        <div class="inner">
        </div>
</div>

这是我的观点，按钮的位置取决于inner div的位置，而不是outer的位置。

希望你明白。

注意： - 按钮对齐或位置完全取决于div width或alignment。

Answer 1

大家好，我试了一下：

CSS：

.container {
height:200px;
width:400px;
border:solid;}

.close {
width:33%;
float:right;
border:solid;
height:100px;}

.save{
width:33%;
float:right;
border:solid;
height:100px;
margin-right:10px;}

.content {
position:relative;
   width:100%;
height:90px;
border:solid;
bottom:2px;
float:right;}

HTML：

<div class="container">

<div class="close"></div>
<div class="save"></div>
<div class="content"></div>

</div>

http://jsfiddle.net/pNZ62/2/

当然你可以更好地设计风格！ ：P 顺便说一下增加或减少容器的宽度，看它是否有效！ 希望我帮了一下。

Answer 2

您可以将所有三个块保留在div中，并以百分比形式给出每个块的宽度。

.save{width:20%;}
.close{width:20%;}
div{width:90%;}

Answer 3

您可以设置一个容纳div和输入的容器元素，然后将输入宽度设置为适合您需要的百分比，例如每个输入为25％，div为100％

Answer 4

<强> Here is the JSfiddle

<强> HTML：

<div class="outer">
    <input id="Submit1" type="submit" value="Save" />
    <input id="Submit2" type="submit" value="Close" />
    <div class="inner"></div>
</div>

<强> CSS：

#Submit1, #Submit2 {
    width: 22%;
    float: right;    
}
.inner {
    width: 100%;
    clear: right;
}