並排取得兩個div

試圖讓兩個div並排排列，但在讓它們彼此連接時遇到了一些麻煩。這就是我試圖在「我們今天正在招聘」和「今日安排」的地方做出的設計。並排取得兩個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; 
}

來源

2017-04-02 Diddydan

可能的重複[如何保持兩個div並排相同的高度？]（http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-是側由端最同一高度） – Rob

從兩個div刪除position: fixed。（position: fixed從文檔流中取出元素，所以浮動對它們沒有影響。）

您還需要確保包裝具有足夠的寬度以容納兩個div的全部寬度。

來源

2017-04-02 00:42:23 Chaim

並排取得兩個div

回答

相關問題