我在我的文本框中鍵入文本，它移動得越多我鍵入

這是我的HTML我有3個文本框，只讀了第一個div內的文本。我在我的文本框中鍵入文本，它移動得越多我鍵入

html, 
 
body { 
 
\t background-position: fixed; 
 
\t background-attachment: fixed; 
 
\t background-size: auto; 
 
\t background-color: #e2e1e0; 
 
\t background-repeat: no-repeat; 
 
\t -webkit-touch-callout: none; /* iOS Safari */ 
 
\t -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
\t -khtml-user-select: none; /* Konqueror */ 
 
\t -moz-user-select: none;  /* Firefox */ 
 
\t -ms-user-select: none;  /* IE/Edge */ 
 
\t user-select: none; 
 
\t z-index: 1; 
 
} 
 

 

 
.header{ 
 
font-family: 'Poiret One', Arial; 
 
color: black; 
 
font-size: 2em; 
 
border-radius: 10px; 
 
border-color: black; 
 
border-style: 
 
} 
 

 
.infodiv { 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    display: inline-block; 
 
    height: 300px; 
 
    margin: 1rem; 
 
    width: 300px; 
 
} 
 

 
.statsdiv { 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
    font-family: 'Oswald', Arial; 
 
} 
 

 
.statsdiv:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
} 
 

 
.playerdiv { 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
    font-family: 'Oswald', Arial; 
 
} 
 

 
.playerdiv:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
} 
 

 
.seconddiv { 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
    font-family: 'Oswald', Arial; 
 
} 
 

 
.seconddiv:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
}

<html> 
 
    <head> 
 
\t \t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    </head> 
 
<body> 
 
<center> 
 

 
<h1 class="header">Heading Placeholder</h1> 
 
<hr> 
 
<!--Statistic's Division--> 
 
<div class="infodiv statsdiv"> 
 
<center> 
 
<i class="fa fa-clock-o"></i><br><p>This first box moves the more I type, it allows me to type up to 3 lines of text but after that it becomes higher in position for example here X X X<p> 
 
</center> 
 
</div> 
 
<!--Player Division--> 
 
<div class="infodiv playerdiv"> 
 
<center> 
 
<i class="fa fa-line-chart"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2> 
 
</center> 
 
</div> 
 
<!--Informational Division--> 
 
<div class="infodiv seconddiv"> 
 
<center> 
 
<i class="fa fa-check-circle-o"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2> 
 
</center> 
 
</div> 
 

 
</center> 
 

 
</body> 
 
</html>

我不認爲它工作得很好，但如果你可以把它放在一個記事本真正的快速它應該做的，我有這個問題。目前在HTML中，我把3個字母'X's刪除這3個X的問題應該解決。問題是它只是讓我添加3行文本。

如果你不明白我還在說什麼，請讓我知道。我只用了1級計算機科學在高中幾年前，所以它可能是很醜陋：/

來源

2017-01-31 Ess

我不完全確定我理解這個問題。你想有一個特定的寬度和高度的div，其大小不會增加你放入的文字越多嗎？如果沒有，試着用文字解釋你想要什麼，以及你如何想象在屏幕上看到它。 –

這個CSS

.infodiv { 
    float: left; 
    background: #fff; 
    border-radius: 5px; 
    display: inline-block; 
    height: 300px; 
    margin: 1rem; 
    width: 300px; 
}

來源

2017-01-31 05:33:23 Kamalakannan

添加vertical-align:top;添加到您的.infodiv 即：

.infodiv { 
    background: #fff; 
    border-radius: 5px; 
    display: inline-block; 
    height: 300px; 
    margin: 1rem; 
    width: 300px; 
    vertical-align:top; 
}

來源

2017-01-31 05:42:02 vvtx

我在我的文本框中鍵入文本，它移動得越多我鍵入

回答

相關問題