Question

我目前正在建立一个网站而且我没有经历过。所以我有那些具有不同内容（文本，表格和列表）的框。每个盒子都有40px的填充和自动高度。在文本一和表一上它完美地工作。只有列表有问题：

我做错了什么？我还希望信息框的下边缘与要素框边缘的垂直位置相同。由于这个网站将有很多不同高度的不同内容，但是相同的布局，一种负责任的解决方案应该是非常棒的。它有CSS的方式吗？

这就是我想要的：

http://abload.de/img/howiwantithpuz9.jpg

这里是代码：

 <div id="mainContainer">
 <div class="boxSeperator text">
  <p>
    <span class="gross">  BLENDER</span>

 </div>

 <div class="boxMenu">
   <div class="boxContainer"><a href="inspirations.html">INSPIRATIONS</a>      
 </div>
    <div class="boxContainer"><a href="programs.html">PROGRAMS</a></div>
    <div class="boxContainer"><a href="tutorials.html">TUTORIALS</a></div>
    <div class="boxContainer"><a href="articles.html">ARTICLES</a></div>
 </div>

 <div class="description">
   <div class="boxTitle">
     text content
 </div>


 <div class="information">
   <div class="boxTitle">
  <p class="unterpunkt left">Information</p>
 </div>
  <div class="boxText"><img src="blender.png"/>
  <table>
       table content
  </table>
  </div>
 </div>

 <div class="features">
   <div class="boxTitle">
  <p class="unterpunkt left">FEATURES</p>
 </div>

 <!--Features-->

  <ul>
     li content
  </ul>

</div>

列表框的CSS：

.features {
 width:55%;
 margin-right:1%;
 float:left;
 margin-top:50px;
 }

.features ul {
 padding:40px;
 background-color:#fff;
 width:100%;
 height:100%;
 box-sizing: border-box;
 }

.features li {
 color:#555;
 float:left;
 width:49%;
 height:40px;
 text-align:center;
 padding-top:12px;
 margin-right:2px; 
 box-sizing: border-box;
 border:1px solid #888;
 }

希望我在这篇文章中没有做错任何事？对不起凌乱的代码。我感谢每一条评论！

列在自动高度div中

0 个答案: