Question

我目前的代码是：

<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列，但仍保留标签？

Answer 1

将CSS styles与css selectors一起使用，然后查看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>

Answer 2

<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>

Answer 3

我开始远离花车并转向内联挡

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/

内联块确实有一些注意事项：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 4

您应始终将样式放在外部样式表中。

然后您可以将此代码放入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]-->

Answer 5

只需设置两个部分的宽度，并将左侧的浮动设置为：

<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>

css - 并排制作两个<section>标签</section>

5 个答案: