0

我已经为此苦苦挣扎了一段时间，我似乎真的无法在网上找到答案。

所以我一直在尝试将两个 div 放在一起，毕竟这很有效。但是，这些 div 放置在页面的最左侧，一旦我将 webbroswer 窗口变小，右侧 div 就会放在左侧 div 上，这是我不想要的（它应该始终放在左侧 div 旁边，也如果窗口较小）。其次，那些 div 应该放在页面的中心，我似乎不能让它工作。

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

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

样式.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;
                    }

索引.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>
4

1 回答 1

1

将两个 div 放在一个包装器中并给该包装器 amargin:0 auto 然后像往常一样继续将两个 div 彼此相邻放置（按照此处操作）。

对于上面的工作实施，请到这里。

/*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%;
}
于 2013-05-07T18:13:02.100 回答