即使在侧栏也不呈现主列

我有一个两列布局，主要内容区域呈现在页面下方。甚至没有放在一边。我想知道我是否需要一个包装div？或者我的CSS不正确？我没有张贴的CSS正是想也许重要即使在侧栏也不呈现主列

enter image description here

@charset "utf-8"; 
 
body { 
 
\t font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
 
\t background: #FFF; 
 
    background-image:url(../assets/bg1.png); 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t color: #000; 
 
} 
 
.sidebar h4 { 
 
\t padding-bottom: 0; 
 
\t font-size: 13px; 
 
\t color: #fff; 
 
\t text-transform: uppercase; 
 
\t font-weight: normal; 
 
\t padding: 7px 7px; 
 
\t border-bottom: 1px solid #A31923; 
 
    \t background-color: #DE2D3A; 
 
} 
 
/* ~~this fixed width container surrounds the other divs~~ */ 
 
/*#container { 
 
\t width: 960px; 
 
\t margin: 20px auto; 
 
\t padding: 10px; 
 
\t box-shadow: 0 5px 5px 5px #CCCCCC; 
 
\t background-color: #fff; 
 
}*/ 
 
.container { 
 
\t width: 1260px; 
 
\t margin: 20px auto; 
 
\t padding: 10px; 
 
\t background: #FFF; 
 
    box-shadow: 0 0 5px 5px #B8B8B8; 
 
\t /*margin: 0 auto; the auto value on the sides, coupled with the width, centers the layout */ 
 
} 
 

 
.sidebar { 
 
    float: left; 
 
    width: 180px; 
 
\t margin-top: 10px; 
 
} 
 

 
.sidebar h4 { 
 
\t padding-bottom: 0; 
 
\t font-size: 13px; 
 
\t color: #fff; 
 
\t text-transform: uppercase; 
 
\t font-weight: normal; 
 
\t padding: 7px 7px; 
 
\t border-bottom: 1px solid #A31923; 
 
    \t background-color: #DE2D3A; 
 
} 
 

 
.footer { 
 
\t padding: 10px 0; 
 
\t background: #CCC49F; 
 
\t position: relative; 
 
\t clear: both; 
 
} 
 

 

 
.fltrt { 
 
\t float: right; 
 
\t margin-left: 8px; 
 
} 
 
.fltlft { 
 
\t float: left; 
 
\t margin-right: 8px; 
 
} 
 
.clearfloat { 
 
\t clear:both; 
 
\t height:0; 
 
\t font-size: 1px; 
 
\t line-height: 0px; 
 
} 
 
.clear { 
 
\t clear: both; 
 
}

<body> 
 
    <div class="container"> 
 
\t <header> 
 
\t \t <h2>our website slogan here with header image</h2> 
 
\t </header> 
 
\t <nav> 
 
\t \t <ul> 
 
\t \t \t <li>X</li> 
 
\t \t \t <li>X</li> 
 
\t \t </ul> 
 
\t </nav> 
 
\t <aside class="sidebar"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <h4>X</h4> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li>X</li> 
 
\t \t \t \t \t <li>X</li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t </ul> 
 
\t </aside> 
 
\t <main> 
 
\t \t <section> 
 
\t \t <article> 
 
\t \t \t <h2>CCCC</h2> 
 
\t \t \t <p>CCC</p> 
 
\t \t </article> 
 
\t \t <article> 
 
\t \t \t <h1>xXX<h1> 
 
\t \t \t <h2>XXX</h2> 
 
\t \t \t <p>XX</p> 
 
\t \t </article> 
 
\t \t <article> 
 
\t \t \t <h2>XXX</h2> 
 
\t \t \t <p>V</p> 
 
\t \t </article> 
 
\t \t </section> 
 
\t </main> 
 
\t <div class="clear"></div> 
 
\t <footer> 
 
\t \t <p>XXX.</p> 
 
\t </footer> 
 
    
 
</body> 
 
</html>

来源

2017-03-31 James Parker

的''

谢谢迈克尔，我看了文章非常启发清除了我的东西。我发现这篇文章也很不错http://www.quackit.com/html_5/tags/html_aside_tag.cfm –

我不知道如果我需要的包装DIV？

不是，你可以在没有附加包装的情况下实现它。

或者也许我的CSS不正确？

这是个问题，你的CSS可能会好得多。您使用的是float，除非使用背后有充分的理由，否则我们在2017年：使用flexbox，而不是一次性忘记浮动元素。

你的例子并没有完整的代码，所以我会做一个简单的代码片段，一个全宽头，一个180px旁边的主要内容和一个全宽页脚。所有这些仅在一个包装中：.container元素。

span{ 
 
display: block; 
 
    color: white; 
 
    padding: 1rem; 
 
} 
 

 
.container{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
header{ 
 
    width: 100%; 
 
    min-height: 50px; 
 
    background-color: #e74c3c; 
 
} 
 

 
aside{ 
 
    flex-basis: 180px; 
 
    min-height: 300px; 
 
    background-color: #f1c40f; 
 
} 
 

 
main{ 
 
    flex: 1; 
 
    min-height: 300px; 
 
    background-color: #f39c12; 
 
} 
 

 
footer{ 
 
    width: 100%; 
 
    min-height: 80px; 
 
    background-color: #2ecc71; 
 
}

<div class="container"> 
 
    <header> 
 
    <span>Header</span> 
 
    <!-- Put your content here --> 
 
    </header> 
 
    
 
    <aside> 
 
    <span>Aside</span> 
 
    <!-- Put your content here --> 
 
    </aside> 
 
    
 
    <main> 
 
    <span>Main</span> 
 
    <!-- Put your content here --> 
 
    </main> 
 
    
 
    <footer> 
 
    <span>Footer</span> 
 
    <!-- Put your content here --> 
 
    </footer> 
 
</div>

来源

2017-04-01 13:37:16

即使在侧栏也不呈现主列

回答

相关问题