Question

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cougar Inn Directions</title>

    <link rel="stylesheet" type="text/css" href="case.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="case.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
    <div id="header">
        <h1>This is the Cougar Hotel</h1>
    </div>
    <div id="navcon">
        <div id="nav">
            <ul>
                <li style="border-Left: 1px solid #e9e9e9"><a href="cougarhome.html">Home</a></li>
                <li><a href="#">About Cougar Inn </a>
                    <ul>
                        <li><a href="#">Accommodations</a></li>
                        <li><a href="#">Services/Amenities</a></li>
                        <li><a href="#">Meeting/Events</a></li>
                    </ul>
                </li>
                <li><a href="cougarreservation.html">Reservations</a></li>
                <li><a href="cougardirections.html">Directions</a></li>
                <li><a href="contactus.php">Contact Us</a>
                    <ul>
                        <li><a href="contactus.php#phone">Phone</a></li>
                        <li><a href="contactus.php#email">Email</a></li>
                        <li><a href="contactus.php#feedback">Feedback</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- end navcon -->
    </div>
    <!-- end nav -->
    <div id="pagewrapper">
        <div class="pagecon">
            <h2>This is class pagecon</h2>
            <p>
                <div id="slideshow">
                    <div>
                        <img src="hotel 1 s.jpg" alt="HomePic1">
                    </div>
                    <div>
                        <img src="hotel 4 s.jpg">
                    </div>
                    <div>
                        <img src="hotel 6 s.jpg">
                    </div>
                </div>
                <div class="bodycon">
                    <h1>Directions to</h1>
                    <iframe width="425" height="350"
                        src="https://maps.google.com/maps;output=embed"></iframe>
                </div>
                <!--end bodycon -->

                <table border='1' class="tablecon">
                    <tbody>
                        <tr>
                            <td>
                                <p>
                                    *From Hwy 37 get off at the Stadium exit and head<br>
                                    east down Broadway to N College Ave.  Turn right on College<br>
                                    onto Bangle Street.  We are right next to Columbia College.
                                </p>
                            </td>
                            <tr>
                                <td>
                                    <p>
                                        *From I-141 get off at the Hues St exit. Head south<br>
                                        on Hues till you get to Bangle St.  Turn right on Bangle<br>
                                        and you will see the Bangle Inn next to the College.<p>
                                </td>
                            </tr>
                    </tbody>
                </table>
        </div>
        <!--end class pagecont -->
    </div>
    <!-- end pagewrapper -->
</body>
</html>

这是css：

 * {
    margin: 0px;
    padding: 0px;
}

#header {
    background-image: url(./headimg.jpg);
    height: 60px;
    background-repeat: repeat;
}

#navcon {
    background-image: url(./wood.jpg);
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: thick;
    border-bottom-color: #083272;
}

#nav {
    width: 450px;
    height: 30px;
    position: relative;
    color: #080808;
    font-family: arial, sans-serif;
    margin: 0px auto;
    font-size: .9em;
}

    #nav ul {
        list-style-type: none;
    }

        #nav ul li {
            float: left;
            position: relative;
        }

            #nav ul li a {
                border-right: 1px solid #e9e9e9;
                padding: 5px;
                display: block;
                text-align: center;
                color: #080808;
                text-decoration: none;
            }

                #nav ul li a:hover {
                    background: #144678;
                    color: #fff;
                }

            #nav ul li ul {
                display: none;
            }

            #nav ul li:hover ul {
                display: block;
                position: absolute;
                z-index: 1;
            }

                #nav ul li:hover ul li a {
                    display: block;
                    background: #144678;
                    color: #fff;
                    width: 120px;
                    text-align: center;
                    border-bottom: 1px solid #f2f2f2;
                    border-right: none;
                }

                    #nav ul li:hover ul li a:hover {
                        background: #4879A5;
                        color: #fff;
                    }

body {

background: #B5C4D9;
}

#pagecont {
width: 980px;
margin: 0 auto;
position: relative;

} 

.pagecon {

    background-image: url(./mainbackimg.jpg);
    margin: 15px;
    padding: 15px;
    border-style: solid;
    position: relative;

    min-height: 100%;
    float: left;
}

.bodycon {

    background: #5F86C0;
    margin: 20px;
    padding: 15px;
    border-style: solid;
    position: relative;
    height: auto;
    min-height: 100%;
    float: left;
}


.tablecon {
    margin: 20px;
    padding: 15px;
    border-style: solid;
    position: relative;
    height: auto;
    min-height: 100%;
    float: left;
}

#slideshow {
    margin: 10px auto;
    position: relative;
    width: 350px;
    height: 247px;
    padding: 10px;
    float: left;
    border-style: solid;
}

    #slideshow > div {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

我试图让盒子排成一行，这样他的照片就在左边。＆＃34;指示＆＃34;框应该在图片框的旁边，即使它在顶部。桌子应该在图片框的正下方（不要做很远的地方）。我已经玩了一段时间，可以真正使用一些帮助。

Answer 1

好吧，我改变了你的代码。我在#slideshow div周围创建了一个包装器，并将带有幻灯片的表插入到该包装器中，使它们像这样的列：

<div class="left-wrapper"> 
                    <div id="slideshow">
                        <div>
                            <img src="hotel 1 s.jpg" alt="HomePic1">
                        </div>
                        <div>
                            <img src="hotel 4 s.jpg">
                        </div>
                        <div>
                            <img src="hotel 6 s.jpg">
                        </div>
                    </div>
                    <table border='1' class="tablecon">
                    <tbody>
                        <tr>
                            <td>
                                <p>
                                    *From Hwy 37 get off at the Stadium exit and head<br>
                                    east down Broadway to N College Ave.  Turn right on College<br>
                                    onto Bangle Street.  We are right next to Columbia College.
                                </p>
                            </td>
                            <tr>
                                <td>
                                    <p>
                                        *From I-141 get off at the Hues St exit. Head south<br>
                                        on Hues till you get to Bangle St.  Turn right on Bangle<br>
                                        and you will see the Bangle Inn next to the College.<p>
                                </td>
                            </tr>
                    </tbody>
                </table>        
                </div>

该包装器的类是：

.left-wrapper {
 display: inline-block;   
}

#slideshow的新css是：

#slideshow {
    margin: 10px auto;
    position: relative;
    width: 350px;
    height: 247px;
    padding: 10px;
    border-style: solid;
}

.bodycon的新css是：

.bodycon {

    background: #5F86C0;
    margin: 10px 20px;
    padding: 15px;
    border-style: solid;
    position: relative;
    height: auto;
    min-height: 100%;
    display: inline-block;
    vertical-align: top;
}

最后updated fiddle

Answer 2

您的div.bodycon显示低于div#slideshow，因为top-margin设置不同。将两者设置为相同的数字。

http://jsbin.com/yovit/1/

.bodycon {
  margin: 10px;
  /* Etc. */
}

#slideshow {
  margin: 10px;
  /* Etc. */
}

无法让div排队

2 个答案: