Точно расположите текстовые поля, нависающие над элементами холста - PullRequest
Новая
       10

Точно расположите текстовые поля, нависающие над элементами холста

0 голосов
/ 24 марта 2019

У меня есть 2 полотна бок о бок (и несколько «скрытых» также) (я хочу, чтобы бок о бок так и оставалось). Я пытаюсь найти способ заставить их оставаться в центре, а не обтекать, когда пользователь сжимает окно браузера. Однако есть проблема: я также хочу собирать информацию о пользователях с помощью текстовых полей и выпадающих меню. Текстовые поля и пункты меню должны выглядеть так, как будто они являются частью среды Canvas. Я хочу, чтобы они парили ТОЧНО ... ТОЧНО .... над холстом (-ами), чтобы они выглядели как часть холст-арта. Но держать холсты по центру и применять относительные и абсолютные позиции к текстовым полям и меню, оказалось непросто. Я попробовал «родительский» 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>

1 Ответ

0 голосов
/ 24 марта 2019

ваш родительский div не соответствует ширине контейнера canvas (#centerAll). Я сделал родительский div абсолютным и сделал ширину равной контейнеру canvas. Затем переместил абсолютные div и использовал свойство text-align для центрирования элемента ввода по левому или правому краю в соответствии с элементом canvas. 

<!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>
...