• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vertikale Ausrichtung funktioniert nicht

S

Sempervivum

Guest
Hallo,
ich habe hier ein Javascript, das ein kleines Quiz generiert. Das Problem, das ich habe, betrifft jedoch CSS.
Code:
<script type="text/javascript">
<!--
function renderQuiz2() {
document.writeln('<div id="seite" style="display: table-cell; vertical-align: top">');
for(i=0;i<questions.length;i++) {
document.writeln('<span style="display: inline-block;">');
document.writeln('<br><img src="' + images[i] + '" style="border:0" alt="" /><br>');
document.writeln('<span class="question" style="margin-top: 0; padding-top: 0;">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></span><br>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
document.writeln('</span>');
}
document.writeln('</div><br>');
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}
renderQuiz2();
//-->
</script>
Vereinfacht auf das wesentliche sieht es so aus:
Code:
function renderQuiz2() {
     document.writeln('<div id="seite" style="display: table-cell; vertical-align: top">');
     for(i=0;i<questions.length;i++) {
        document.writeln('<span style="display: inline-block;">');
        // hier eine Quizfrage mit variabler Höhe und variabler Breite
         document.writeln('</span>');
     }
     document.writeln('</div>');
}
renderQuiz2();
Ich hoffe, man kann das HTML und CSS erkennen trotz Javascript Mein Problem ist, dass ich es nicht schaffe, die einzelnen Fragen oben auszurichten. Nach allem was ich weiß, müsste das mit mit style="display: table-cell; vertical-align: top" für das umgebende Element gehen. Ich habe versucht, den span-Elementen eine feste Höhe zu geben, aber dann bleibt die Oberkante wo sie ist und das Element vergrößert sich unten.
Eine Lösung mit Divs mit fester Höhe und float:left habe ich schon, aber ich hätte lieber das "display: inline-block;", womit sich das Element so schön an den Inhalt anpasst.
Viele Grüße - Ulrich
 
Werbung:
Habe es jetzt hinbekommen, indem ich den spans ebenfalls ein "vertical-align: top" gegeben habe. Funktioniert, aber verstehen tue ich es nicht. Wäre nett, wenn es noch jemand erklären könnte.
 
Werbung:
Dieser Link ist leider nicht zielführend, weil er nur eine tabellarische Auflistung von Parametern enthält und keine Erklärung der Zusammenhänge. So etwas findet man doch jederzeit mit Google!
 
Zurück
Oben