Question

我正在设计一个网页，但我是一个完整的HTML / CSS新手。我想要以下格式：

上半部分和下半部分。

上半部分包含6个大盒子，分为两列，每盒3个。

下半部分包含一些其他内容，无论我想要什么。

现在我（不知何故）让它工作，但唯一的事情是＆＃34; bottom_half＆＃34;太靠近＆＃34; top_half＆＃34; - 我只想在两者之间增加一点余量。但是，当我尝试这样做时，会发生奇怪的事情而且我不明白我做错了什么。

这是我的html布局概述：

<div class="top_half">
  <div class="left_half">
     <div class="big_box">
        <!-- box 1 content -->
     </div>
     <div class="big_box">
        <!-- box 2 content -->
     </div>
     <div class="big_box">
        <!-- box 3 content -->
     </div>
   </div> <!-- left-half -->
   <div class="right_half">
     <div class="big_box">
        <!-- box 4 content -->
     </div>
     <div class="big_box">
        <!-- box 5 content -->
     </div>
     <div class="big_box">
        <!-- box 6 content -->
     </div>
   </div> <!-- right-half -->
 </div> <!-- top-half -->

 <div class="bottom_half">
    <!-- bottom-half content -->
 </div>

我的上半部分和下半部分的CSS看起来像这样：

.top_half {
    height: auto;
    width: auto;
    margin-top: 70px;
    padding-top: 70px;
    background: lightgreen 
}

.bottom_half {
    height: auto;
    width: auto;
    margin-top: 70px;
    padding-top: 70px;
    background: lightyellow;
}

奇怪的是，top_half div只是页面顶部的一个非常小的栏，而bottom_half div基本上占据了整个页面。

我的布局不好吗？我应该采用不同的方式吗？我根本没有这方面的经验，所以我一直在学习。

谢谢！

编辑：

修正了一些拼写错误。看看这个，看看我的意思：https://jsfiddle.net/d7ejv3ad/3/ ^^为什么灰色的盒子不在绿色栏内？

Answer 1

演示：https://jsfiddle.net/d7ejv3ad/

HTML

<main>
  <div>
    <div>
      <div class="boxes"></div>
      <div class="boxes"></div>
      <div class="boxes"></div>
    </div>

    <div>
      <div class="boxes"></div>
      <div class="boxes"></div>
      <div class="boxes"></div>
    </div>
  </div>

  <div>
    Content
  </div>
</main>

CSS

main > div:first-child {
    height: 50vh;
    width: auto;
    background: lightgreen 
}
  main > div:first-child > div { display: inline-block; height: 100%; width: 49%; }
    main > div:first-child .boxes {
      margin: 2.5% 0 0 2.5%;
      width: 28%;
      height: 28%;
      background: #fff;
    }

main > div:last-child {
    height: 50vh;
    width: auto;
    padding: 50px;
    background: lightyellow;
}

Answer 2

第二行HTML代码<div class="left_half>中存在输入错误，这应该与<div class="left_half">类似另外在CSS中添加这一行

.big_box{display:inline;}

如何在两个div之间添加空格？

2 个答案: