Question

我编写了一些代码，试图将google map iframe放在div的左侧，其中在页脚内添加一些文本和按钮，同时尝试使地图和文本具有响应性。

我遇到了麻烦。有人可以建议什么吗？

这是我的HTML代码：

.map iframe {
  align: left;
  position: relative;
  width: 100%;
  padding-top: 75%;
}

.map .openning {
  right: 0;
  float: right;
  text-align: left;
}

<div class="ftr center">
  <div class="map left">
    <iframe src="URL HERE" style="border:none;"></iframe>
    <div class="openning">
      <h3>Opening Times</h3>
      <div id="days">
        <h4>Mon-Fri:</h4>
        <h5>00:00 - 00:00</h5>
        <h4>Sat-Sun:</h4>
        <h5>00:00 - 00:00</h5>
      </div>
      <button id="donate" class="btn pink small">Donate now</button>
    </div>
  </div>
</div>

Answer 1

忘记所有的正确，浮动和文本对齐，您将混合使用彼此无关的不同功能。相反，我建议使用flexbox，这会使一切变得非常简单。将父级设置为显示：弯曲并使子级宽50％。

.flex {
  display: flex;
}

.flex > * {
  width: 50%;
}

<div class="flex">
  <iframe src="https://example.com" style="border:none;"></iframe>
  
  <div class="right">
    <h3>Opening Times</h3>
    <div id="days">
      <h4>Mon-Fri:</h4><h5>00:00 - 00:00</h5><h4>Sat-Sun:</h4><h5>00:00 - 00:00</h5>
    </div>
    <button id="donate" class="btn pink small">Donate now</button>
  </div>
</div>

Answer 2

尝试在CSS中使用百分比宽度和flex属性来提高响应速度。

<body>
<div id="box">
    <h4>Mon-Fri:</h4>
    <h5>00:00 - 00:00</h5>
    <h4>Sat-Sun:</h4>
    <h5>00:00 - 00:00</h5>
  </div>
<div id="iframeWrapper">
  <iframe id="iframe">
</div>
</body>




body{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#iframeWrapper{
  position: relative;
  display: block;
  background-color: red;
  width: 50%;
 }

#box{
  position: relative;
  background-color: yellow;
  color: black;
  text-align: center;
  width: 50%;
}

Answer 3

align是html属性，而不是css。试试这个：

.map {
  overflow: hidden;
}

.map iframe {
float: left;
position: relative;
width: 70%;
}

.map .openning {
    float: left;
    text-align: left;
    width: 28%;
    padding: 0 1%;
}

<div class="ftr center">
        <div class="map left">
            <iframe src="URL HERE" style="border:none;"></iframe>
            <div class="openning">
            <h3>Opening Times</h3>
            <div id="days">
            <h4>Mon-Fri:</h4><h5>00:00 - 00:00</h5><h4>Sat-Sun:</h4><h5>00:00 - 00:00</h5>
            </div>
            <button id="donate" class="btn pink small">Donate now</button>
        </div>
        </div>
    </div>

更多最新解决方案是使用flexbox

在响应时尝试将iframe和div放在旁边

3 个答案: