0

私の現在のコードはこれです：

<section><iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

私の課題では、iframe と textarea の両方で section タグを使用する必要がありますが、それらを並べて配置する必要があります。セクション タグを取り除くと、完全に整列しますが、セクション タグを保持する必要があります。これを2列のように並べて、タグを保持するにはどうすればよいですか?

4

5 に答える 5

2

CSS セレクターでCSS スタイルを使用し、 floatを見てください。

迅速で汚い修正：

<section style="float:left; width:675px;"><iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section style="float:left; width:200px;"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>
于 2013-05-03T05:13:40.243 に答える
0

両方のセクションの幅を設定し、両方のフロートを左に設定するだけです:

<section style="float:left; width:675px;"><iframe id="frame1" width="675" height="380"           src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section style="float:left; width:200px;"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>
于 2013-05-03T06:23:47.827 に答える
0 
<section style="display:block;float:left; width:675px;">
     <iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe>
</section>
<section style="display:block;float:left; width:200px;">
     <textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea>
</section>
于 2013-05-03T05:22:51.757 に答える
0

フロートからインラインブロックに傾き始めています

HTML

<section class="left">
   <iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe>    
 </section>
 <section class="right">
    <textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea>    
 </section>

CSS

.left
{
    display:inline-block;
    width:675px;
}


.right
{
    display:inline-block;
    width:200px;
}

例: http://jsfiddle.net/nV8ag/

ただし、インライン ブロックにはいくつかの注意事項があります。

于 2013-05-03T05:27:14.597 に答える
0

スタイルは常に外部スタイルシートに配置する必要があります。

次に、このコードを HTML に配置できます。

<section id="section-1"><iframe width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section>
<section id="section-2"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

そして、CSS ファイルに次のようなものを含めます。

section {display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;}
#section-1 {width:680px; height:400px;} These are the ID's of your sections
#section-2 {width:200px; height:480px;}

また、HTML5 要素の使用方法を学習している場合は、古いブラウザー用の HTML5 shiv を含めるようにしてください。

これを HTML ドキュメントの head タグに入れるだけです。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2013-05-03T05:36:48.523 に答える