74

<iframe>Google マップの右側に段落を配置したいと考えています。

コードを表示する方法がわからないので、必要なスクリーンショットを次に示します。

4

12 に答える 12

59

float スタイルを使用するだけです。Google マップの iframe を div クラスに配置し、段落を別の div クラスに配置してから、次の CSS スタイルをそれらの div クラスに適用します (フロート効果の後にブロックをクリアすることを忘れないでください。ブロックの下で問題が発生しないようにしてください)。 :

CSS

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>
于 2013-09-30T08:47:42.850 に答える
51

float:leftまたはの 2 つのオプションがありますdisplay:inline-block。

どちらの方法にも注意点があります。display:inline-blockフローティングの問題のいくつかを回避するため、最近ではより一般的になっているようです。

この記事http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/またはこの記事http://www.vanseodesign.com/css/inline-blocks/を読んで、より詳細な議論。

于 2013-09-30T08:54:33.017 に答える
5

あなたiframeの外側divに を与えるstyle display:inline-blockために、そしてあなたの段落divにも与えるdisplay:inline-block

HTML

<div class="side">
    <iframe></iframe>
</div>
<div class="side">
    <p></p>
</div>

CSS

.side {
   display:inline-block;
}
于 2013-09-30T08:48:41.400 に答える
4

float または inline 要素を使用します。

例JSBIN

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>float example</div>
  <div><div style="float:left">Floating left content</div><div>Some content</div></div>
  <div>inline block example</div>
  <div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
于 2013-09-30T08:52:26.007 に答える
2

このような

.block {
    display: inline-block;
    vertical-align:top;
}

JSFiddleデモ

于 2013-09-30T08:51:58.897 に答える
1

iframe をクラスでラップし、左をフロートします。

の段落は、余裕がある限り、強制的に右上に配置されます。次に、段落を display:inline-block に設定し、左マージンを追加して整頓します。

<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>


.left { float: left; }
p { display: inline-block; margin-left: 30px;  }

ここにフィドルがあります：http://jsfiddle.net/4DACH/

于 2013-09-30T08:56:25.043 に答える
1

float:leftdiv を 1 行に揃えるために使用できます。

フィドル

于 2013-09-30T08:46:06.603 に答える
1

float要素 (マップ ラッパーと段落) を使用することも、両方で使用することもできinline-blockます。

于 2013-09-30T08:46:58.130 に答える
1

iframeの中に入れてCSS<p>を作るiframe

float:left;

表示:インラインブロック;

于 2013-09-30T08:47:51.750 に答える
0

ボックスにクラスfoo（または何でも）を与え、cssを追加します

.foo{
    float: left;
}
于 2013-09-30T08:48:07.270 に答える