Question

HTML新手在这里。放轻松我。

我的代码：

<html>

<head>
    <title>Simple encrypt/decrypt</title>

    <style type="text/css">

        body 
        {
            background-color: #A9F5F2;
            width: 900px;
        }
        .outerdiv
        {
            margin: 5px;
            border: 2px solid #FF8000;
            background-color: #FFFFFF;
            font-family: Arial;
        }
        #col1
        {
            width: 550px;
            height: 800px;
        }
        #col2
        {
            width: 200px;
            height: 800px;
        }
        #title1div
        {
            width: 100%;
        }
        #insctdiv
        {
            width: 100%;
        }
        #iptdiv
        {
            height: 400px;
            width: 100%;
        }
        #buttonsdiv
        {
            text-align: center;
            width: 100%;
        }
        #inputText
        {
            width: 100%;
            height: 100%;
            resize: none;
        }

    </style>


    <script type="text/javascript">

        function encrypt()
        {
            var text = document.getElementById("inputText").value;
            newstring = "";
            /* Make newstring a string of the bit representations of 
               the ASCII values of its thisCharacters in order.
            */
            for (var i = 0, j = text.length; i < j; i++) 
            { 
                bits = text.charCodeAt(i).toString(2);
                newstring += new Array(8-bits.length+1).join('0') + bits;
            }
            /* Compress newstring by taking each substring of 3, 4, ..., 9 
               consecutive 1's or 0's and it by the number of such consecutive
               thisCharacters followed by the thisCharacter. 
               EXAMPLES:
                    "10101000010111" --> "10101401031"
                    "001100011111111111111" --> "0011319151"
            */
            newstring = newstring.replace(/([01])\1{2,8}/g, function($0, $1) { return ($0.length + $1);});      
            document.getElementById("inputText").value = newstring;
        }

        function decrypt()
        {
            var text = document.getElementById("inputText").value;
            text.replace(/([2-9])([01])/g,
            function (all, replacementCount, bit) {
                return Array(+replacementCount + 1).join(bit);
            }).split(/(.{8})/g).reduce(function (str, byte) {
                return str + String.fromCharCode(parseInt(byte, 2));
            }, "");
            document.getElementById("inputText").value = text;
        }

    </script>

</head>

<body>
    <div id="col1">
        <div class="outerdiv" id="title1div">
            <h1>Reversible text encryption algorithm</h1>
        </div>
        <div class="outerdiv" id="insctdiv">
            <p>Type in or paste text below, then click <b>Encrypt</b> or <b>Decrypt</b></p>
        </div>
        <div class="outerdiv" id="iptdiv">
            <textarea id="inputText" scrolling="yes"></textarea>
        </div>
        <div class="outerdiv" id="buttonsdiv">
            <button onclick="encrypt()"><b>Encrypt</b></button>
            <button onclick="decrypt()"><b>Decrypt</b></button>
        </div>
    </div>
    <div class="outerdiv" id="col2">
    </div>

</body>

</html>

正如你在身体中看到的，我有两个div，col1和col2，我希望最终会成为两列。由于col1的宽度为550像素，col2的宽度为200px，而主体的宽度为900像素，这是不是意味着col1和col2彼此相邻？我认为col2在col1下的唯一原因是它被推到那里因为它们的组合宽度超过了页面的宽度。但也许我的理解是错误的。

Answer 1

下面的内容应该展示嵌套div如何工作以及如何将它们彼此相邻浮动

CSS

.wrapper{
position:relative;
margin:0px auto 0px auto;
padding:0px;
width:90%;
height:500px;
background-color:rgba(0,0,0,0.1);}

.left,.right{
position:relative;
float:left;
display:block;
margin:5%;
padding:0px;
width:40%;
height:40%;
background-color:rgba(0,0,0,0.1);}

HTML

<div class="wrapper">
    <div class="left">
    left <br />
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>

    <div class="right">
        right
    </div>
</div>

Answer 2

你需要使用float：left;在col1和col2上让它们彼此相邻。它只需要在col1上，但从技术上讲，它不会伤害到任何东西。

Answer 3

<div>是块（显示：块）并且总是在彼此之下，除非你使用float：left或float：right或display：inline-block;。

Answer 4

你必须添加

#col1, #col2{
  display: inline-block;
}

Answer 5

尝试将float:left应用于col1。

Answer 6

你需要使用float css属性

float: [left | right];

在这个实例中设置“float：left;”在col1上就像这样

#col1 {
     float: left;
}

旁注：我建议将这些设置为类而不是ID，尽管如此：

.col1 {
     float: left;
}

另外，将col1编辑为：

<div class="col1">...

如何制作嵌套的div？

6 个答案: