为什么 2column 不起作用？
[英]Why wont 2column work?
问题描述
I am trying create a webpage displayed in multi column.
我正在尝试创建一个以多列显示的网页。 I figured one column on left side would contain the main content and on the right side would be just other information which would take less space.我认为左侧的一列将包含主要内容，而右侧的一列只是其他信息，它们会占用更少的空间。 I've created 3 div sections: wrapper, main_content, sidebar.我创建了 3 个 div 部分：wrapper、main_content、sidebar。 The CSS stuff is on top and HTML on bottom. CSS 内容在顶部，HTML 在底部。 For some reason this isn't working.出于某种原因，这不起作用。 Is one of the other containers/elements such as body or maybe article preventing this from working?是否有其他容器/元素（例如 body 或文章）阻止了它的工作？
<?xml version="1.0" encoding="UTF-8"?> <!--is this necessary? was in the linktastic example-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
a:link{
color:blue; <!--is this even necessary? oesnt overide the css for OL above-->
text-decoration: none;}
a:visited{color:#silver;}
a:hover{background-color: #B5DCF5;
color:white;
text-decoration:underline;
font-weight:bold
}
#art2{
margin-top: 1.5em; <!--Interestingly, when you don't give attritbute values to this child class, it will inheir parent class attribute vals-->
}
article{
background-color: white;
width: 94%;
border: 1px solid black;
margin-bottom: .625em;
margin: auto;
<!--WHYYY?????-->
padding: 2%;
}
body{
background-color: #7eb4e9 ; <!--background color edit-->
}
caption {
display: table-caption;
font-size: 1.375em;
text-align: center;
margin-bottom: 1.5%;
}
figure{
text-align: center;
margin-right: 1.375em;
margin-left: 1.375em;
padding: 1.5%;
}
figcaption{
margin-top: 1%;
text-align: center;
font-size: 1.375em;
font-style: italic;
color: black;
}
footer{
text-align: center;
padding: 5%;
}
header {
display: block;
background-color: white;
width: 85%;
margin: auto;
}
h1{
font-size: 3.75em;
color: #FF9900 ;
font-weight: Bold;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-style: normal;
text-align: center;
}
h2{
font-size: 2.5em;
color: #064E7C;
font-weight: normal;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-style: normal;
text-align: center;
}
img {
border: .5em solid #ddd;
border-radius: .5em;
padding: .938em;
width: 56.25em;
height: 18.75em;
}
#navlist
{
border-bottom: 1px solid #FFCC66;
border-top: 1px solid #FFCC66;
margin-bottom: 1.875em;
padding-left: 5.25em;
padding-right: 5.25em;
background-color: #FF9900;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.62em;
padding-bottom: 0.1875em;
padding-top: 0.1875em;
}
#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #FF9900;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #064E7C;
font-weight: bold;
text-decoration: none;
}
#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 0.0625em solid #000000;
padding: 0.0625em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
}
#navlist li
{
padding-right: 0.0625em;
display: inline;
font-size: 0.5em;
}
#navlist ul
{
margin: 0em;
padding: 0em;
}
#navlist #active a { background-color: #FFCC66; }
ol{font-size: 1.25em;
color: #064E7C;
margin-left: 5%;
}
p{
font-size: 1.15em;
color: black;
font-weight: normal;
font-variant: normal;
font-family: "Verdana";
font-style: normal;
margin-right: 1.875em;
margin-left: 1.875em;
padding: 1.5%;
}
p.date{<!--only affects paragraphs with class "date"-->
font-size: 0.9375em;
color: grey;
font-weight: normal;
font-variant: normal;
font-family: "Times New Roman", Times, serif;
font-style: italic;
margin-right: 1.875em;
margin-left: 1.875em;
}
table{
background-color: #B5DCF5;
font-family: arial;
height: 15.625em;
width: 68%;
border: 0.125em solid #064E7C;
border-spacing: .312em;
margin-left:15%;
margin-right:15%;
margin-bottom: 5%;
text-align: center;
padding: 2.5%;
}
th{background-color: silver;}
td{background-color: white;}
#wrapper{ width: 900px;
height: 100%;
margin-left: auto;
margin-right: auto;}<!--if not needed delete-->
#wrapper #main_content{
width: 300px;
float: left;
}
#wrapper #sidebar {
width: 600px;
float: right;
}
</style>
<title> Jigme's Blog </title>
</head>
<body>
<header>
<h1>Mechanics of a Perfect Jumpshot!</h1>
</header>
<hr />
<!--horizontal line-->
<figure>
<img src="collagepic.jpg" alt="feet"><!--do CSS-->
<figcaption>
Break down of Chef Curry's perfect shot (photo edited via ed)
</figcaption>
</figure>
<article>
<nav>
<ul id="navlist">
<li id="active"><a href="homepage.html" id="current">Home </a></li>
<!--shows current page ur on-->
<li><a href="page1.html">The Base </a></li>
<li><a href="page2.html">Shoulder Alignment </a></li>
<li><a href="page3.html">BallPlacement </a></li>
<li><a href="page4.html">Elbows In </a></li>
<li><a href="page5.html">The Arc </a></li>
</ul>
</nav>
<br>
<br>
<div id="wrapper">
<div id="main_content">
<!--each blog post must be enclosed with article tag-->
<h2>Introduction</h2>
<p class="date">Article by: Jigme Ritzekura, Updated: Sept. 06, 2016 - 08:05 am</p>
<p>
To master the "perfect jumpshot", one must have a good grasp of the basic mechanics of shooting a basketball first. On this site,
we will break the jumpshot into 5 foundational components and elaborate on them. These include:
</p>
<ol>
<li>The Base</li>
<li>Shoulder Alignment</li>
<li>Ball Placement</li>
<li>Elbows In</li>
<li>The Arc</li>
</ol>
<p>
If you really want to improve your shooting accuracy, merely
knowing how to shoot is not enough. You must go out and implement these methods and allow your muscle memory to kick in. In due time,
you will see significant improvement. For example, check out the before and after statistics of John Roberts below (all shots were
taken from the free-throw range):
</p>
<table summary="This table shows the shooting statistics of player before learning the 5 methods for success. ">
<thead>
<caption>Before applying the methods</caption>
<tr>
<th>Distance From Basket</th>
<th>Shot Attempts</th>
<th>Shot Made</th>
<th>FG %</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4"><strong>*** (Total FG% Accuracy: 50%) </strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Free Throw</td>
<td>100</td>
<td>65</td>
<td>65%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three Point</td>
<td>100</td>
<td>35</td>
<td>35%</td>
</tr>
</tbody>
</table>
<table summary="This table shows the shooting statistics of player before learning the 5 methods for success. ">
<thead>
<caption>After applying the methods</caption>
<tr>
<th>Distance From Basket</th>
<th>Shot Attempts</th>
<th>Shot Made</th>
<th>FG %</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><strong>*** (Total FG% Accuracy: 64%) </strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Free Throw</td>
<td>100</td>
<td>80</td>
<td>80%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three Point</td>
<td>100</td>
<td>48</td>
<td>48%</td>
</tr>
</tbody>
</table>
</p>
</article>
<article id="art2">
<p> Now that you are convinced, you can learn more about each segments in more detail in the links below:
<nav>
<ul>
<li><a href="page1.html">The Base</a></li>
<li><a href="page2.html">Shoulder Alignment</a></li>
<li><a href="page3.html">Ball Placement</a></li>
<li><a href="page4.html">Elbows In</a></li>
<li><a href="page5.html">The Arc</a></li>
</ul>
</nav>
</p>
</article>
</div><!--closing tag for "#main_content"" -->
<div id="sidebar">
<article>
<p>
Hello, this is the side bar of the webpage. In here will contain information about subscribing to our page
by submitting your contact info. Look out for more materials!
</p>
</article>
</div><!--closing tag for ""#sidebar""-->
<br>
<br>
</div> <!--closing tag for "#wrapper"-->
<footer>
<small>Copyrights 2016 - Jigme </small>
</footer>
</body>
</html>
1 个解决方案
解决方案1
0 2016-10-02 18:50:24
its better you use display inline-flex in wrapper.最好在包装器中使用 display inline-flex 。 and remove those float right left.并从右向左移除那些浮动。 otherwise they break down.否则他们会崩溃。 According to your code.根据你的代码。 And Its also better if you use width as % CheckFiddle .如果您使用宽度作为 % CheckFiddle ，它也会更好。 In fiddle I use % .在小提琴中，我使用 % 。 I added height and border for test only in #main_content and #sidebar .我仅在 #main_content 和 #sidebar 中添加了用于测试的高度和边框。
Full Code of yours I have comment out where I found The error and change small part of css those are also commentout你的完整代码我已经注释掉了我发现的错误并更改了css的一小部分，这些也被注释掉了
<?xml version="1.0" encoding="UTF-8"?> <!--is this necessary? was in the linktastic example--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> a:link{ color:blue; <!--is this even necessary? oesnt overide the css for OL above--> text-decoration: none;} a:visited{color:#silver;} a:hover{background-color: #B5DCF5; color:white; text-decoration:underline; font-weight:bold } #art2{ margin-top: 1.5em; <!--Interestingly, when you don't give attritbute values to this child class, it will inheir parent class attribute vals--> } article{ background-color: white; width: 94%; border: 1px solid black; margin-bottom: .625em; margin: auto; padding: 2%; } body{ background-color: #7eb4e9 ; <!--background color edit--> } caption { display: table-caption; font-size: 1.375em; text-align: center; margin-bottom: 1.5%; } figure{ text-align: center; margin-right: 1.375em; margin-left: 1.375em; padding: 1.5%; } figcaption{ margin-top: 1%; text-align: center; font-size: 1.375em; font-style: italic; color: black; } footer{ text-align: center; padding: 5%; } header { display: block; background-color: white; width: 85%; margin: auto; } h1{ font-size: 3.75em; color: #FF9900 ; font-weight: Bold; font-variant: small-caps; font-family: "Times New Roman", Times, serif; font-style: normal; text-align: center; } h2{ font-size: 2.5em; color: #064E7C; font-weight: normal; font-variant: small-caps; font-family: "Times New Roman", Times, serif; font-style: normal; text-align: center; } img { border: .5em solid #ddd; border-radius: .5em; padding: .938em; width: 56.25em; height: 18.75em; } #navlist { border-bottom: 1px solid #FFCC66; border-top: 1px solid #FFCC66; margin-bottom: 1.875em; padding-left: 5.25em; padding-right: 5.25em; background-color: #FF9900; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.62em; padding-bottom: 0.1875em; padding-top: 0.1875em; } #navlist a, #navlist a:link, #navlist a:visited { border: 1px solid #FF9900; padding: 1px; padding-left: 0.5em; padding-right: 0.5em; color: #064E7C; font-weight: bold; text-decoration: none; } #navlist a:hover, #navlist a:active, #navlist a:focus { border: 0.0625em solid #000000; padding: 0.0625em; padding-left: 0.5em; padding-right: 0.5em; text-decoration: none; } #navlist li { padding-right: 0.0625em; display: inline; font-size: 0.5em; } #navlist ul { margin: 0em; padding: 0em; } #navlist #active a { background-color: #FFCC66; } ol{font-size: 1.25em; color: #064E7C; margin-left: 5%; } p{ font-size: 1.15em; color: black; font-weight: normal; font-variant: normal; font-family: "Verdana"; font-style: normal; margin-right: 1.875em; margin-left: 1.875em; padding: 1.5%; } p.date{<!--only affects paragraphs with class "date"--> font-size: 0.9375em; color: grey; font-weight: normal; font-variant: normal; font-family: "Times New Roman", Times, serif; font-style: italic; margin-right: 1.875em; margin-left: 1.875em; } table{ background-color: #B5DCF5; font-family: arial; height: 15.625em; width: 68%; border: 0.125em solid #064E7C; border-spacing: .312em; margin-left:15%; margin-right:15%; margin-bottom: 5%; text-align: center; padding: 2.5%; } th{background-color: silver;} td{background-color: white;} #wrapper{ display:inline-flex; <!--MY EDIT [add this and remove the width coz every div width by default 100%]--> margin-left: auto; margin-right: auto;}<!--if not needed delete--> #wrapper #main_content{ width: 30%; <!--MY EDIT [30% using from wrapper]--> } #wrapper #sidebar { width: 60%; <!--MY EDIT [30% using from wrapper]--> } </style> <title> Jigme's Blog </title> </head> <body> <header> <h1>Mechanics of a Perfect Jumpshot!</h1> </header> <hr /> <!--horizontal line--> <figure> <img src="collagepic.jpg" alt="feet"><!--do CSS--> <figcaption> Break down of Chef Curry's perfect shot (photo edited via ed) </figcaption> </figure> <article> <!-- My EDIT[You start this article Section before wrapper but close this before wrapper end tag] --> <nav> <ul id="navlist"> <li id="active"><a href="homepage.html" id="current">Home </a></li> <!--shows current page ur on--> <li><a href="page1.html">The Base </a></li> <li><a href="page2.html">Shoulder Alignment </a></li> <li><a href="page3.html">BallPlacement </a></li> <li><a href="page4.html">Elbows In </a></li> <li><a href="page5.html">The Arc </a></li> </ul> </nav> <div id="wrapper"> <div id="main_content"> <!--each blog post must be enclosed with article tag--> <h2>Introduction</h2> <p class="date">Article by: Jigme Ritzekura, Updated: Sept. 06, 2016 - 08:05 am</p> <p> To master the "perfect jumpshot", one must have a good grasp of the basic mechanics of shooting a basketball first. On this site, we will break the jumpshot into 5 foundational components and elaborate on them. These include: </p> <ol> <li>The Base</li> <li>Shoulder Alignment</li> <li>Ball Placement</li> <li>Elbows In</li> <li>The Arc</li> </ol> <p> If you really want to improve your shooting accuracy, merely knowing how to shoot is not enough. You must go out and implement these methods and allow your muscle memory to kick in. In due time, you will see significant improvement. For example, check out the before and after statistics of John Roberts below (all shots were taken from the free-throw range): </p> <table summary="This table shows the shooting statistics of player before learning the 5 methods for success. "> <thead> <caption>Before applying the methods</caption> <tr> <th>Distance From Basket</th> <th>Shot Attempts</th> <th>Shot Made</th> <th>FG %</th> </tr> </thead> <tfoot> <tr> <td colspan="4"><strong>*** (Total FG% Accuracy: 50%) </strong></td> </tr> </tfoot> <tbody> <tr> <td>Free Throw</td> <td>100</td> <td>65</td> <td>65%</td> </tr> </tbody> <tbody> <tr> <td>Three Point</td> <td>100</td> <td>35</td> <td>35%</td> </tr> </tbody> </table> <table summary="This table shows the shooting statistics of player before learning the 5 methods for success. "> <thead> <caption>After applying the methods</caption> <tr> <th>Distance From Basket</th> <th>Shot Attempts</th> <th>Shot Made</th> <th>FG %</th> </tr> </thead> <tfoot> <tr> <td colspan="5"><strong>*** (Total FG% Accuracy: 64%) </strong></td> </tr> </tfoot> <tbody> <tr> <td>Free Throw</td> <td>100</td> <td>80</td> <td>80%</td> </tr> </tbody> <tbody> <tr> <td>Three Point</td> <td>100</td> <td>48</td> <td>48%</td> </tr> </tbody> </table> <!-- </p> My EDIT[extra p closing tag remove] --> <!-- </article> My EDIT[You need to close this article section after the #wrapper ] --> <article id="art2"> <p> Now that you are convinced, you can learn more about each segments in more detail in the links below: <nav> <ul> <li><a href="page1.html">The Base</a></li> <li><a href="page2.html">Shoulder Alignment</a></li> <li><a href="page3.html">Ball Placement</a></li> <li><a href="page4.html">Elbows In</a></li> <li><a href="page5.html">The Arc</a></li> </ul> </nav> </p> </article> </div><!--closing tag for "#main_content"" --> <div id="sidebar"> <article> <p> Hello, this is the side bar of the webpage. In here will contain information about subscribing to our page by submitting your contact info. Look out for more materials! </p> </article> </div><!--closing tag for ""#sidebar""--> </div> <!--closing tag for "#wrapper"--> </article><!-- My EDIT[You need to close this article section after the #wrapper] --> <footer> <small>Copyrights 2016 - Jigme </small> </footer> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
2列CSS布局 - 2Column CSS Layout
在2列布局中匹配列高 - Matching column height in 2column layout
为什么这个jQuery无法工作？ - why wont this jquery work?
为什么$（this..children（）不会为我工作？ - Why wont $(this).children() work for me?
为什么这不适用于Internet Explorer？ - Why wont this work in Internet Explorer?
为什么我的动画不起作用？ - Why wont my Animation work?
为什么幻灯片不能在服务器上工作但可以离线工作 - Why slideshow wont work on server but work offline
为什么VBS根本无法在我的IE中工作？ - Why VBS wont work in my IE at all?
为什么我的CSS幻灯片无法正常工作？ - Why wont my CSS slideshow work?
为什么我的悬停命令不起作用？ - Why wont my hover command work?
相关标签