Question

我有这个CSS：

.div0{padding:5px;height:70px;}
.pos0{float:left;height:50px;padding:5px; background: red;}
.butt{float:middle; position:relative;top:8px;height:40px;}
.pos1 { background: green; position:relative;left:15px;top:4px;min-width:100px; }
.pos2 {  position:relative;left:15px;bottom:-8px;  } //background: yellow;

和这个HTML：

<div class="div0" id="Div0" style="background-color: rgb(255, 255, 221);">

  <div class="pos0">
        <button name="Pag" class="butt" id="ButtFull0">MY butt here</button>
    </div>

   <div class="pos1"><span>  aLev:</span>
        <input size="1" id="S0" type="text"/><span>  vMin:</span>
        <input size="1" id="n0" type="text"/><span>  vMid:</span>
        <input size="1"  id="inp0" type="text" /><span>  vM:</span>
        <input size="1"  id="inp1" type="text"/><span id="Q0"> text</span>
    </div>

   <div class="pos2">
        <input id="y0" type="checkbox"/><span>  1°:</span>
        <input id="y10" type="checkbox"/><span>  2°:</span>
        <input id="e0" type="checkbox"/><span>  3°:</span>
        <input p id="p0" type="checkbox"/>
     </div>

</div>

我希望按钮垂直居中于左侧，两条线带有输入和右侧的复选框，两者垂直均匀间隔。所有保持位置，同时收缩窗口。

我试过这个： http://jsfiddle.net/qacp35fv/33/

问题：

1）2条线与按钮重叠（我将背景颜色设置为绿色以便更好地查看问题），因此您无法轻松点击它。

2）当将结果窗口缩小到右边时，1°线变为多线：我更喜欢它仍然是一行，没有看到一些文字而没有增加总高度。

Answer 1

这将是一个很好的使用基础。您可以在正确的div中添加输入元素。

＆＃13;

body {
    padding: 0px;
    margin: 0px;
}

#wrapper {
    width: 100%;
    font-size: 0px;
    display: table;
}

#left-column {
    background: red;
    display: table-cell;
    height: auto;
    font-size: 16px;
    width: 120px;
    vertical-align: top;
}

#right-column {
    background: yellow;
    display: table-cell;
    font-size: 16px;
    width: calc(100% - 120px);
    vertical-align: top;
}

#row-1, #row-2 {
    height: 20px;
    overflow-x: hidden;
}

＆＃13;

<div id="wrapper">
    <div id="left-column">
        Left column
    </div>
    <div id="right-column">
        <div id="row-1">
            Right column row 1 with extra long text that will be hidden when resized.
        </div>
        <div id="row-2">
            Right column row 1
        </div>
    </div>
</div>

＆＃13;

如何在缩放窗口时将3个div与CSS保持相对位置对齐

1 个答案: