Question

我不能让我的网页绝对。当我重新定位我的网页时，＆＃34; Name1＆＃34; ＆安培; ＆＃34;名称2＆＃34; ＆安培; ＆＃34;选择框＆＃34;四处走动。我希望能够调整浏览器的大小并保持大小，以便文本和选择框不会发生冲突。感谢

以下是代码：

CSS：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}
div {
    position: absolute;
    top: 0 border: 0
}
#TL {
    background: 0;
    top: 0;
    left: 5%;
    right: 0%;
    bottom: 0%
}
#TRR {
    background: 0;
    top: 25%;
    left: 30%;
    right: 0;
    bottom: 0%
}

HTML

    <div id="TL">
    <h2>Name1</h2>
    <select name="select1" id="select1" size="4" multiple>
        <option value="1">Fruit</option>
        <option value="2">Animal</option>
        <option value="3">Bird</option>
        <option value="4">Car</option>
    </select>

    </div>

    <div id="TL">   
    <h2>Name2</h2>
    <select name="select2" id="select2" size="4" multiple>
        <option value="1">Banana</option>
        <option value="1">Apple</option>
        <option value="1">Orange</option>
        <option value="2">Wolf</option>
        <option value="2">Fox</option>
        <option value="2">Bear</option>
        <option value="3">Eagle</option>
        <option value="3">Hawk</option>
        <option value="4">BWM
            <option>
    </select>
          <input type="button" id="button" value="Execute" />
            <div id="wrapper"></div>
    </div>

使用Javascript：

  $("#select1").change(function() { 
    if($(this).data('options') == undefined){
        /*Taking an array of all options-2 and kind of embedding it on the select1*/
        $(this).data('options',$('#select2 option').clone());
        } 
    var id = $(this).val();

        console.log(id);


        var options = $(this).data('options').filter(

        function () {
            return $.inArray(this.value, id) > -1
        });
        $('#select2').html(options);
    });

    $('#button').click(function() {
        var values = [];

         $('#select1 option:selected').each(function() {
            values.push($(this).text());
        });
        $('#select2 option:selected').each(function() {
            values.push($(this).text());
        });
        $("#wrapper").html(values.join(", "));
        });

Answer 1

无论何时使用百分比宽度或位置，事物都会根据窗口（或容器）的大小进行调整。

要修正大小和位置，请使用像素等固定单位。

#TL {
  width: 400px;
}

现在也引起问题的是你已经定义了<div id="TL">两次 - 可能其中一个应该是TR。所以目前他们都获得了相同的固定位置。

您通常不需要使用固定位置只是为了防止在调整大小时移动内容。只使用固定宽度的容器就可以完成这项工作 - 当然，这取决于你想要实现的布局。

让网页变得绝对

1 个答案: