在页面中央彼此相邻的两个div

Question

我一直在讨论这个问题，我似乎无法在网上找到答案。

所以我一直在尝试将两个div放在彼此旁边，并且事后才有效。但是，这些div放在页面的最左边，一旦我使webbroswer窗口变小，右边的div放在左边div上，我不想要它（它应该总是放在左边div旁边，也是如果窗口较小）。其次，这些div应该放在页面的中心，我似乎无法让它工作。

我将我的脚本放在jsFiddle中：http://jsfiddle.net/LZMf3/

问题与较低的白框有关，div代码为＃midden_​​box1（左）和＃midden_​​box2（右）。黄色背景是#midden。

的style.css

@charset "utf-8";

/* BOVENKANT */
    body, html, #map {
        margin: 0;
        width: 100%;
        height: 85%;
        text-align: left;
            color: black;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }

    #bovenkant{
        width: 100%;
        height: 40px;
        background-color: black;
        text-align: center;
            line-height: 250%;
            vertical-align: middle;
            color: white;
            font-weight: bold;
            font-size: 18px;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    }

    #box{
        width: 300px;
        background: rgba(0,0,0,0.8);
        z-index: 1000;
        position: absolute;
        top: 80px; 
        left: 50px;
        padding: 10px;
        border-radius: 10px;
        text-align: left;
            color: white;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }

                /* MIDDENSTUK */        
                    #midden{
                        background: #DBA901;
                        position: relative;
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                    }

                    #midden_box1{
                        background: white;
                        width: 300px;
                        height: auto;
                        padding: 10px;
                        float: left;
                        overflow: hidden;
                        margin-left: auto;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        margin-right: 10px;
                    }

                    #midden_box2{
                        width:200px;
                        background: white;
                        width: 800px;
                        height: auto;
                        float: left;
                        padding: 10px;
                        margin-right: auto;
                        margin-left: auto;
                        margin-top: 10px;
                        margin-bottom: 10px;
                    }

                            /* onderstuk */
                                #onderkant{
                                width: 100%;
                                height: 40px;
                                background-color: black;
                                text-align: center;
                                    line-height: 250%;
                                    vertical-align: middle;
                                    color: white;
                                    font-weight: bold;
                                    font-size: 15px;
                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
                                }



/* TEKST OPTIES */

        /* bovenkant */

        #bovenkant a:link {
            color: white;
            text-decoration: none;
        }

        #bovenkant a:visited {
            color: white;
            text-decoration: none;
        }

        #bovenkant a:hover {
            color: #F90;
            text-decoration: none;
        }

            /* midden */

                    /* midden_box1 */
                    #midden_box1 a:link {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box1 a:hover {
                        color: #650;
                        text-decoration: none;
                    }

                    #midden_box1 a:visited {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box1 p {
                        line-height: 20px;
                        font-size: 9px;
                        bottom: 5px; 
                    }

                    #midden_box1 b.titel{
                        font-size: 20px;
                        line-height: 2px;
                        color: #630;
                    }

                    #midden_box1 p.datum{
                        font-size: 9px;
                        color: #630;
                    }

                    #midden_box1 b.dagboektitel{
                        font-size: 15px;
                        line-height: 1%;
                        color: #630;
                    }

                    /* midden_box2 */
                    #midden_box2 a:link {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box2 a:hover {
                        color: #650;
                        text-decoration: none;
                    }

                    #midden_box2 a:visited {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box2 p {
                        line-height: 20px;
                        font-size: 9px;
                        bottom: 5px; 
                    }

                    #midden_box2 b.titel{
                        font-size: 20px;
                        line-height: 2px;
                        color: #630;
                    }

                    #midden_box2 p.datum{
                        font-size: 9px;
                        color: #630;
                    }

                    #midden_box2 b.dagboektitel{
                        font-size: 15px;
                        line-height: 1%;
                        color: #630;
                    }

                    #midden_box2 p.tekst{
                        font-size: 12px;
                        white-space: pre-wrap;
                        color: #300;
                    }

的index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">

  <head>
<?
require 'definitie.php';
require 'verbinding.php';
?>
    <title><?php echo INDEX_TITEL; ?></title>
  <link rel="stylesheet" href="./css/style.css" type="text/css">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDypT9N2T2imUPhILy_zfWJP1EGUiSTDKY&sensor=false"></script>
  <script type="text/javascript" src="./js/kaart.php"></script>

  </head>

<body onload="getMap()">
<div id="bovenkant"><? echo MENU; ?></div>

<div id="map">
</div>

<div id="box">

  <b><? echo INDEX_BOX_WELKOM; ?></b>

  <p><? echo INDEX_BOX_INHOUD; ?></p>

</div>

<div id="midden">
       <div id="midden_box1">
        <b class="titel"><?php echo INDEX_BOX_MIDDEN_TITEL; ?></b>
        <?php
        $query = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,7"; // Formulering van de query
        $resultaat = mysql_query($query); //query uitvoeren
        while ($row = mysql_fetch_array($resultaat)){
        ?>
        <?php echo "
        <a href='./blog.php?id=".$row['id']."'>
        <p class='datum'>".$row['plaats']." | ".$row['datum']."</p>
        <b class='dagboektitel'>".$row['titel']."</b>
        </a><br>
        "; ?>
        <?php
        }
        ?>
        </div>

        <div id="midden_box2"> <?php $query1 = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,1"; // Formulering van de query
        $resultaat1 = mysql_query($query1); //query uitvoeren
        $row1 = mysql_fetch_array($resultaat1); ?>
        <?php echo "<a href='./blog.php?id=".$row1['id']."'> <p class='datum'>".$row1['plaats']." | ".$row1['datum']." | ".$row1['auteur']."</p> <b class='titel'>".$row1['titel']."</b> </a> <p class='tekst'>".$row1['bericht']."</h5>" ?>
        </div>
</div>




<div id="onderkant">
<? echo COPYRIGHT; ?>
</div>


</body>

</html>

Answer 1

将两个div放在一个包装器中，然后给该包装器margin:0 auto 然后像往常一样将两个div放在一起（按照 here ）。

对于上述工作实施，请转到 here 。

/*markup*/<div class="wrap">
<div class="outerdiv">
<div class="div1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div class="div2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros.
</div>
</div>

/*style*/ *{ margin:0 ; padding:0 ;}
.wrap{
    height:500px;
    width:500px;
    background:#f00 ;
}
.outerdiv{
    width:80%;
    height:100%;
    background:rgba(0,255,0,0.5);
    margin:0 auto ;
    overflow:auto;
}
.div1{
    float:left;
    width:60%;
    height:100%;
}
.div2{
    height:100%;
    margin-left:60%;
}