Question

我有2个并排的画布（也有几个“隐藏”的画布）（我希望并排保持这种状态）。我试图找到一种方法，当用户缩小浏览器窗口时使它们保持居中，而不是环绕。但是有一个问题：我还想通过文本字段和下拉菜单选择来收集用户信息。文本字段和菜单选择需要像画布环境一样看起来。我希望他们准确地……精确地悬停在画布上，以使它们看起来像是画布艺术的一部分。但是事实证明，保持画布居中并在文本字段和菜单上应用相对位置和绝对位置非常棘手。我尝试了一个“父级” DIV，并使其他DIV相对于父级处于绝对位置...但是我得到了意外的结果。如果它有助于使放置更容易，则可以使画布向左平移。查看代码。

#centerAll {
    margin-left:auto;
    margin-right:auto;
    width:1300px;
}
div.theParent {
    position: relative;
} 
div.absolute1 {
    position: absolute;
    top: 70px;
    left: 0;
    width: 90px;
    height: 20px;
}
div.absolute2 {
    position: absolute;
    top: 120px;
    left: 0;
    width: 90px;
    height: 20px;
}
div.absolute3 {
    position: absolute;
    top: 120px;
    left: 200;
    width: 90px;
    height: 20px;
}
body{ 
    background-repeat: no-repeat; 
    background-position: left;
}

<script type="text/javascript" src="javascriptFile.js"></script>

<div class="parent">
    <div class="absolute1">
        <input type="text" id="letteringText" value="one line of text">
    </div>
    
    <div class="absolute2">
        <select id="select something">
            <option value="option 1">option1</option>
            <option value="option 2">option2</option>
            <option value="option 3">option3</option>
        </select>
    </div>

    <div class="absolute3">
        <select id="select some more">
            <option value="option 1">option1</option>
            <option value="option 2">option2</option>
            <option value="option 3">option3</option>
        </select>
    </div>
</div>

<div id="centerAll">
    <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
    <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
    <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
    <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>
</div>

Answer 1

您的父div与画布容器（#centerAll）的宽度不匹配。我将父div设为绝对，并使宽度等于画布容器。然后浮动绝对div，并使用text-align属性根据画布元素将输入元素置于左侧或右侧的中心位置。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#centerAll {
    margin-left:auto;
    margin-right:auto;
    width:1300px;
    text-align: center;
}
div.parent {
  position: absolute;
  width:1300px;
} 
div.parent:after {
content: '';
display:block;
clear:both;
}
div.absolute1, div.absolute2, div.absolute3 {
  width: 50%;
  float: left;
  box-sizing: border-box;
  text-align: right;
  padding-top: 20px;
  padding: 20px;
}
div.absolute2 {
  text-align: left;
}
div.absolute3 {
  text-align: right;
  padding-left: 50px;
}
body{ background-repeat: no-repeat; background-position: left;}
</style>
</head>
<body>
<div class="parent">

<div class="absolute1">
<input type="text" id="letteringText" value="one line of text">
</div>
<div class="absolute2">
<select id="select something">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</option>
</select>
</div>
<div class="absolute3">
<select id="select some more">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</select>
</div>
</div>

<div id="centerAll">
<canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
<canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>

<script type="text/javascript" src="javascriptFile.js"></script>
</div>

</body>
</html>

将文本字段准确定位在画布元素上

1 个答案: