Question

此代码有 1.左边的textarea 2.右边的一个div 两者都是彼此相邻的。

问题：＃cxt-machine1在屏幕尺寸发生变化时移动/更改或不保持定位，同时margin-left:600px;也发生变化。

#cxt{position:relative; margin:auto; width:70%; height:300px; border:#CCCCCC 1px solid; background-color:#EEEEEE; margin-bottom:50px;}
    <div id="cxt">
<span>
<div style="position:relative; left:20px; width:50%; height:10px; margin-bottom:10px;">

        <span id="B1" class="styling">B1</span>
        <span id="I1" class="styling">I1</span>
        <span id="U1" class="styling">U1</span>
        <span id="I2" class="styling">I2</span>
        <span id="I3" class="styling">I3 Link</span>
        <span id="B2" class="styling">B2</span>
        <span id="S1" class="styling">S1</span>

</div>
    <div id="PCxt">

    <form method="post" action="">

<textarea cols="75" rows="10" id="Tmat" name="Tmat" style=" position:relative; left:0px"></textarea>
<br>
<input type="submit" value="Submit" id="Submit">
</form>


    </div>
</span>
<span>
<div> style="position:relative;  width:48%; height:150px; left:448px; top:-258px; max-width:48%; max-height:5px; text-align:center; font-family:arial; font-size:14px; font-weight:bold;">Cxt-machine Preview</div>
<div id="cxt-machine-1" style="position:fixed;  width:30%; height:250px; margin-left:600px; top:445px; max-width:30%; max-height:250px; overflow: auto; background-color:#ffffff; border:#CCCCCC solid 1px;"></div>
</span>

</div>

寻找解决方案，将#cxt-machine1固定在一个位置，而不管窗口大小。

很抱歉......把所有东西都换成了桌子，虽然我想让编码无表格，但是时间不多了，谢谢你的帮助

Answer 1

给div，#cxt一个宽度（以像素为单位），你应该得到你想要的结果。

另外，请根据百分比或像素为textarea指定宽度，并且不要依赖cols属性来获得所需的样式。

屏幕大小更改</div>时保持<div>固定的CSS解决方案

1 个答案: