Question

尝试让两个div并排排列，但在让它们相互连接方面遇到一些麻烦。这是我试图在“我们今天招聘”和“今日安排”的地方设计的。

HTML：

<!DOCTYPE html>

<head>
<title>Merry Maids</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>

<div class="backgroundofdivgreen">
<header>
    <div class="logo"><a href="index.html"><img src="images/logo.jpg"></a></div>    

    <nav>
    <a href="index.html">Home</a>
    <a href="services.html">Services</a>
    <a href="offers.html">Offers</a>
    <a href="people.html">People</a>
    <a href="franchises.html">Franchises</a>
    <a href="reviews.html">Reviews</a>

<div class ="phone">
Call Us Today: &nbsp; <a href="tel:1233457890">(800) Merry Maids</a>
</div>

<div class="media">
        <a href="http://www.twitter.com" target=_blank"><img src="images/twitter.png"></a>
        <a href="http://www.facebook.com" target=_blank"><img src="images/facebook.png"></a>
</div>

<div class="clearboth"></div>   
</header>
</nav>
</div>

<div class="banner"><img src="images/banner.jpg" alt="Merry Maids Banner Image"></div>

<div class="spacer1"></div>

<article>


<div class="wrapper">

<div class="yellow">
<h1>Schedule Appointments</h1>
<p>Our cleaning services are thorough, consistent and customized. If you would like to request a special service, change your cleaning schedule, or skip an area in your home, just let us know! We are happy to fulfill every request in order to exceed your expectations.Merry Maids home cleaning services are available weekly, every other week, monthly or one-time. On every visit, your Merry Maids team dusts, vacuums, washes and sanitizes each room.</p>
</div>
<div class="green">
<h1>We're Hiring Today</h1>
<p>For more than 30 years, our team members have provided reliable service for homeowners like you worldwide. We clean people's homes like they are our own and we treat our team members with the same concern, respect and care we expect them to show our customers. Merry Maids knows that our team members are our greatest asset and we recognize the power of our people.</p>
</div>

CSS：

.clearboth {
    clear:both;
}

.backgroundofdivgreen {
    height: 96px;
    margin: 0px;
    background-color: #39b54a;
}

header {
    width: 980px;
    background-color: #39b54a;
    margin: 0px auto;
}

nav {
    float:right;
    width: 570px;
    text-align: right;
    padding-top:10px;
}

nav a {
    color:white;
    margin: 0px 25px 0px 0px;
    text-decoration:none;
}

nav a:hover {
    color: #fff799;
}

.logo {
    float:left;
}

.phone {
    margin: 40px 0px 0px 130px;
    color: white;
    float:left;
}

.media {
    float: right;
    margin: -23px 30px 0px 0px;
}

.banner {
    height:553px;
    width:1600px;
    margin: 0px auto;
}

.spacer1 {
    height:20px;
    background-color: #39b54a;
    margin: 0px auto;
}

.wrapper {
    margin: 0 auto;
    overflow: hidden;

}

.yellow {
    position:fixed;
    width:800px;
    height:313px;
    background-color: #fff799;
    float:left;
    text-align:right;
}
.green {
    position:fixed;
    width:800px;
    height:313px;
    background-color: #005e20;
    float:right;
}

Answer 1

Remove the position: fixed from the two divs. (position: fixed takes an element out of the document flow so the floats have no effect on them.)

You'll also need to make sure the wrapper has enough width to accommodate the full width of both divs.

让两个div并排

1 个答案: