HTML 一行两列 - div块儿并列显示_html一行两列代码-优快云博客

本文介绍了一种使用HTML和CSS实现的一行两列布局方法，通过浮动元素(div)来达到并列显示的效果。文章包含具体的代码示例，展示了如何设置div的宽度、高度和浮动属性来创建整洁的并列布局。

一行两列 - div块儿并列显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--<form name="a" id="a" action="#" method="post">-->
<!--    <input type="radio" name="num1" id="username" value="1" checked> 用户名1-->
<!--    <input type="radio" name="num1" id="passwd" value="2"> 用户名2-->
<!--    <input type="button" value="提交" onclick="click1()" />-->
<!--</form>-->
<!--float:left;width:49%;-->
<!--<div class="test_temp" style="width:50%; height: 500px; display: inline">hehe</div>-->
<!--<div class="test_temp" style="width:50%; height: 500px; display: inline">hehe</div>-->
<!--<div class="test_temp" style="width:50%; height: 500px; display: inline">hehe</div>-->
<div class="test_temp" style="width:50%; height: 500px; float:left;">hehe</div>
<div class="test_temp" style="width:50%; height: 500px; float:left;">
    <div class="test_temp" style="width:50%; height: 200px; float:left;">hehe</div>
    <div class="test_temp" style="width:50%; height: 200px; float:left;">hehe</div>

</div>

</body>

<script>
    function get_single_checked_val (name) {
        var radio=document.getElementsByName(name);
        var selectvalue=null;   //  selectvalue为radio中选中的值
        for(var i=0;i<radio.length;i++){
            if(radio[i].checked==true) {
                selectvalue=radio[i].value;
                break;
            }
        }
        return selectvalue

    }
    function click1(){
        var select_val1 = get_single_checked_val("num1")
        console.log('select_val1 = ', select_val1)
    }
</script>
</html>

如图：