将我的页面分成 2 个垂直列（html 或 css）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14296516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dividing my page in 2 vertical columns (html or css)
提问by user1972861
It's the first time I design a website so I need help with dividing my page into 2 vertical parts.
这是我第一次设计网站，所以我需要帮助将我的页面分成 2 个垂直部分。
Basically, I want to have this page : http://elishaabargel.com/denimand this page http://elishaabargel.com/denim2combined. I mean that I want the flash animation on the left and the links to the technical drawings and sketches on the right, down on the page.
基本上，我想要这个页面：http: //elishaabargel.com/denim和这个页面http://elishaabargel.com/denim2结合起来。我的意思是我想要左边的 flash 动画和右边的技术图纸和草图的链接，在页面上。
The first page already contains the html and css codes of the right part but it just doesn't appear.
第一个页面已经包含了右侧部分的 html 和 css 代码，但它只是没有出现。
How can I do this?
我怎样才能做到这一点？
回答by Devon Bernard
There are many ways to divide a page into two parts you could either use iframes, divs, or a table. The most simple would be a table.
有很多方法可以将页面分成两部分，您可以使用 iframe、div 或表格。最简单的就是一张桌子。
<table width=100% height=100%><tr><td width=50%>Put page1 here</td><td width=50%>Put page2 here</td></tr></table>
Also if you are loading two completely full pages it might just be best to use an iframe.
此外，如果您要加载两个完全完整的页面，最好使用 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>
回答by Rocky Inde
I thought I should add the simplest template (using divs) that worked for me here:
我想我应该在这里添加对我有用的最简单的模板（使用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>
You can change the css style options (like width) appropriately to suit your needs.
您可以width适当地更改 css 样式选项（如）以满足您的需要。
回答by anaszaman
You can use bootstrap for division of your page.
您可以使用引导程序来划分页面。
<div class="container">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
If you need 100% width, you can use container-fluid and row-fluid.. I hope this will help you.
如果你需要 100% 的宽度，你可以使用 container-fluid 和 row-fluid.. 我希望这对你有帮助。
回答by Zeddy
I did this in a bit of a rush, and im sure some bits are incorrect like the alignment of your pics on the right being at the top rather than the bottom also the popups are not the same size as your original popups... But it does fix your original issue of the two panels.
我这样做有点匆忙，我确定有些位是不正确的，比如你的照片在右边的对齐方式在顶部而不是底部，而且弹出窗口的大小与原始弹出窗口的大小不同......但是它确实解决了您对两个面板的原始问题。
<!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>
I'm sure yu can put your JQuery code block back to address the popups being of incorrect size.
我相信你可以把你的 JQuery 代码块放回去，以解决大小不正确的弹出窗口。
