爲什麼兩個div不是並排的

我想要一個寬的頂部圖像，然後兩個div並排。包含一個標題和段落和一個圖像：爲什麼兩個div不是並排的

我有這樣的：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
    <img class="full-width-image" src="img/location/1.gif"> 
    <div id = "left"> 
     <h1 class = "top-padded">The Progs</h1> 
     <p>wdnweidnweldnwnwlenwwnww</p> 
    </div> 
    <div id = "right"> 
     <img class="half-width-image" src="img/location/1.gif"> 
    </div> 
</body>

這：

#left {float: left;} 

#right {float: right;} 

.top-padded {padding-top: 1%;} 

.full-width-image { 
    width: 100%; 
    height: auto; 
} 

.half-width-image { 
    width: 30%; 
    height: auto; 
}

但他們仍然堆放在彼此的頂部？我雖然左右浮動應該達到這種效果？

來源

2015-09-20 JSHD

刪除'浮動：權利;''從＃right'。同時添加'display：inline-block;'同時添加'＃left'和'＃right' – divy3993

如果我理解正確，[this]（http://jsfiddle.net/aw4mhjkb/）你想要對嗎？ – divy3993

乾杯divy3993。 – JSHD

嘗試設置容器的寬度。請嘗試以下代碼：

#left {float: left; width: 69%;} 

#right {float: left; width: 30%;} 

.top-padded { 
    padding-top: 1%; 
} 

.full-width-image { 
    width: 100%; 
    height: auto; 
} 

.half-width-image { 
    height: auto; 
}

將float設置爲正確的div的左側也應該起作用。

無論如何，我會建議作出正確的股利靜態的寬度等：

#right {float: right; width: 300px;}

來源

2015-09-20 21:02:42 headione

爲什麼兩個div不是並排的

回答

相關問題