html - 如何在另一 block 内容下方显示某些内容

标签 html css

下面是一张屏幕截图,其中显示了考试信息、计时器和一些问题:

enter image description here

现在的问题是我希望问题详细信息显示在考试详细信息下方,而不是旁边。我的问题是如何让问题显示在下方?我也想要下面的问题

HTML/PHP:

//EXAM DETAILS
 <div class='lt-container'>

    <p><input type='hidden' id='studentId' name='studentId' value='<?php echo $dbStudentId; ?>' /></p>
    <p><strong>Student:</strong><?php echo $dbStudentAlias . " - " . $dbStudentForename . " " . $dbStudentSurname; ?> <br/>
    <strong>Module:</strong><?php echo $dbModuleNo . " - " . $dbModuleName; ?> 
    <input type='hidden' id='moduleId' name='moduleId' value='<?php echo $dbModuleId; ?>' /><br/>
    <strong>Assessment:</strong><?php echo $dbSessionName . " - " . date('d-m-Y',strtotime($dbSessionDate)) . " - " . date('H:i',strtotime($dbSessionTime)); ?> 
    <input type='hidden' id='sessionId' name='sessionId' value='<?php echo $dbSessionId; ?>' /><br/>
    <strong>Assessment Weight: </strong><?php echo $dbSessionWeight; ?> <br/>
    <strong>Total Marks: </strong><?php echo $dbTotalMarks; ?> <br/>
    <strong>Penalty: </strong><?php echo $penaltymsg; ?> </p>
    </div>

//TIMER
    <div id='rt-container'>
    <h1><span id='countdown'><?php echo $dbSessionDuration; ?></span></h1>
    </div>

    <?php
    }

//QUESTION DETAILS
    foreach ($arrQuestionId as $key=>$question) {

    ?>

    <div class='lt-container'>
    <p><strong>QUESTION <span id="quesnum"></span>:</strong></p>
    <p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " .  htmlspecialchars($arrQuestionContent[$key]); ?></p>
    </div>

CSS:

.lt-container{
 float: left;   
 }

#rt-container {
 clear: right;
 float:right;  
}

最佳答案

.lt-container 中移除 float:left。并将 #rt-container 放在 .lt-container

之上
.lt-container{   
 }
#rt-container {
 float:right;  
    background:red
}

DEMO

关于html - 如何在另一 block 内容下方显示某些内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14745500/

相关文章:

html - 通过 iframe 嵌入 office 表单

javascript - 在另一个 js 文件中调用 JavaScript 函数

css - 有没有什么办法可以通过变换属性实现不断增长的 div 动画?

javascript - 在 JQuery 中的下一个动画开始之前停止上一个动画

html - 在没有 JavaScript 和绝对定位的情况下让 DIV 填充页面的其余部分?

javascript - HTML5 中的音频数据流

javascript - 如何从 Codepen 获取代码并在本地使用?

html - 数字输入 - 始终显示微调按钮

css - 在CSS中,级联和继承有什么区别?

html - 背景大小在 IE 中不起作用