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

我开始从浮动转向内联块

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/

于 2013-05-03T05:27:14.597 回答
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 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 文档的头部标签中。

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