將嵌入式地圖和隱藏溢出並排放置div

Question

如何將地圖和標題並排放置？我不會在意標題是否在窄屏幕下方，否則它們應該並排。我甚至會採取其他佈局建議。

關於將div並排放置有很多問題和答案，並且在閱讀並嘗試其中的很多之後，我仍然沒有得到它的工作。這是我迄今爲止所擁有的。

http://jsfiddle.net/uun9hyfg/1/

CSS

.map_and_caption 
{ 
    width: 700px; 
    height: 200px; 
    margin: auto; 
    padding: 10px; 
    display: inline-block; 
} 

.map 
{ 
    width:470px; 
    overflow:hidden; 
    margin-left:5px; 
    margin-right:auto; 
} 

.caption 
{ 
    width:230px; 
    margin-left: 15%; 
    height: 200px; 
    float: right; 
} 

HTML

<div class="map_and_caption"> 
    <div class="map"> 
     <iframe src="https://www.google.com/maps/embed" width="800" height="300" frameborder="0" style="border:0"></iframe> 
    </div> 
    <div class="caption"> 
     <h2>Best Price, Great Location</h2> 
     <p>We are located inside of the office of Dr. Joe Shmo and a Happy Place. With a comfortable atmosphere we attend you with the warmth of a Happy Place and the professionality of a medical office.</p> 
    </div> 
</div> 

Answer 1

主要問題是容器沒有足夠的寬度來容納裏面的兩個元素，我也簡化了CSS代碼。

http://jsfiddle.net/uun9hyfg/2/

.map_and_caption { 
    width: 700px; 
    height: 200px; 
    margin: auto; 
} 
.map { 
    width:470px; 
    float: left; 
    margin-right: 30px; 
} 
.caption { 
    width:200px; 
    float: left; 
} 
.map iframe { 
    max-width: 100% 
} 

Answer 2

你的CSS應該是這樣的：

.map_and_caption 
{ 
    width: 700px; 
    height: 200px; 
    margin: auto; 
    padding: 10px; 
    display: inline-block; 
} 
.map 
{ 
    width:50%; 
    overflow:hidden; 
    display:inline-block; 
} 
.caption 
{ 
    width:50%; 
    display:inline-block; 
    height: 200px; 
    float: right; 
} 

點擊這裏：http://jsfiddle.net/erickcortorreal/gsw9wdac/1/