Question

如何将地图和标题并排放置？我不在乎标题是否会在屏幕下方缩小，但是否则它们应该并排放置。我甚至会采取其他布局建议。

关于将div放在一起有很多问题和答案，在阅读并尝试了很多div之后，我仍然没有让它工作。这是我到目前为止所做的。

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/

将div与嵌入式地图和隐藏溢出并排放置

2 个答案: