0

私はしばらくこれに苦労してきましたが、オンラインで答えを見つけることができないようです.

だから私は2つの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;
                    }

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>
4

1 に答える 1

1

両方の div をラッパーに配置し、そのラッパーに a を指定してmargin:0 auto から、通常どおり 2 つの 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 に答える