我正在尝试创建一个以多列显示的网页。我认为左侧的一列将包含主要内容，而右侧的其他信息则只占用较少的空间。我创建了3个div部分：wrapper，main_content，sidebar。 CSS的东西在顶部，HTML在底部。由于某种原因，这是行不通的。是其他容器/元件之一，如身体或物品阻止它工作？
def bar(*options)
p options
p yield if block_given?
end
foo(1)
# >> [1]
foo(2) { 'hello' }
# >> [2]
# >> "hello"
答案 0 :(得分：0)
在包装中使用display inline-flex会更好。并删除左边的浮动。否则他们会崩溃。根据你的代码。如果你使用宽度为％CheckFiddle，它也会更好。在小提琴我使用％。我在#main_content和#sidebar中添加了高度和边框以进行测试。
你的完整代码我已经注释了我发现的错误并且改变了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>