html - 将我的页面分成 2 个垂直列（html 或 css）

Question

这是我第一次设计网站，所以我需要帮助将我的页面分成 2 个垂直部分。

基本上，我想要这个页面：http ://elishaabargel.com/denim和这个页面http://elishaabargel.com/denim2结合。我的意思是我想要左侧的 Flash 动画和右侧的技术图纸和草图的链接，在页面下方。

第一个页面已经包含右侧部分的 html 和 css 代码，但它只是没有出现。

我怎样才能做到这一点？

score 9 · Accepted Answer

有很多方法可以将页面分成两部分，您可以使用 iframe、div 或表格。最简单的就是一张桌子。

<table width=100% height=100%><tr><td width=50%>Put page1 here</td><td width=50%>Put page2 here</td></tr></table>

此外，如果您要加载两个完整的页面，最好使用 iframe。

<iframe src="pg1.html" style="position:absolute;top:0;left:0;width:50%;height:100%;"></iframe>
<iframe src="pg2.html" style="position:absolute;top:0;left:50%;width:50%;height:100%;"></iframe>

score 5 · Accepted Answer

我想我应该在这里添加对我有用的最简单的模板（使用divs）：

<div id="container" style="width:100%;">                                   
  <div id="left" style="float:left; width:50%;"> This is left panel </div>                     
  <div id="right" style="float:right; width:50%;"> This is right panel </div>                   
</div>

您可以适当地更改 css 样式选项（如width）以满足您的需要。

score 4 · Accepted Answer

您可以使用引导程序来划分页面。

<div class="container">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>

如果你需要 100% 的宽度，你可以使用 container-fluid 和 row-fluid.. 我希望这会对你有所帮助。

score 2 · Accepted Answer

我做的有点匆忙，我确定有些位是不正确的，比如你的图片在右边的对齐是在顶部而不是底部，而且弹出窗口的大小与你原来的弹出窗口的大小不同......但是它确实解决了两个面板的原始问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Elisha Bargel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="fashion, design, student, shenkar, college, portfolio, creation, mode">
<meta name="description" content="Fashion designer Elisha Abargel: projects, pictures, contact.">
<style type="text/css">
    #flashContent { width:100%; height:100%; }
    body {background-color: #FFFFFF;}
    h1 {font-family:Cursive; color: #000000;}
    p {font-family:Cursive; font-size: 14pt; font-style: normal; font-weight: normal; color: #000000;}
    .link {color: #000000;}
    .alink {color: #000000;}
    .vlink {color: #000000;}
</style>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <div id="MainTitle" style="text-align: center;"><img alt="" src="http://elishaabargel.com/photos/logo2.jpg"></div>
        <div id="MainLinks" style="text-align: center;"><a href="http://elishaabargel.com/projects.html" style="font-size: 3; font-family: 'courier new'; text-decoration: none;">projects</a> - <a href="http://elishaabargel.com/contact.html" style="font-size: 3; font-family: 'courier new'; text-decoration: none;">contact</a></div>
        <div id="LeftPanel" style="width: 800; height: 100%; float: left;">
            <h1>Denim Project</h1>
            <div id="flashContent">
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="612" id="denimproject" align="middle">
                    <param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" width="800" height="612">
                        <param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#ffffff" />
                        <param name="play" value="true" />
                        <param name="loop" value="true" />
                        <param name="wmode" value="window" />
                        <param name="scale" value="showall" />
                        <param name="menu" value="true" />
                        <param name="devicefont" value="false" />
                        <param name="salign" value="" />
                        <param name="allowScriptAccess" value="sameDomain" />
                    <!--<![endif]-->
                        <a href="http://www.adobe.com/go/getflash">
                            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                        </a>
                    <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                </object>
            </div>

        </div>
        <div id="RightPanel" style="width: 200; height: 100%; text-align: left; vertical-align: bottom; float: right;">
            <a href="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg" target="_blank"><img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg"></a><br />
            <a href="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg" target="_blank"><img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg"></a>
        </div>
</div>
</form>

我确信你可以把你的 JQuery 代码块放回去，以解决弹出窗口大小不正确的问题。

html - 将我的页面分成 2 个垂直列（html 或 css）

4 回答 4

Related

Reference