CSS布局：以正确的顺序对齐元素答案

【问题标题】：CSS layout: align elements in the right orderCSS布局：以正确的顺序对齐元素
【发布时间】：2018-07-12 16:12:56
【问题描述】：

我需要一些布局帮助。下面的容器 ( .webdevelopment ) 应如下所示：标题应以 100% 宽度居中对齐；然后是两个“innhaltbox”div 的 50%，然后是 100% 的技能表，孩子们应该有空间。我想我有一些选择器问题，一些帮助会很好。

  <div id="Webdevelopment">
            <div class="titel">Webdevelopment</div>
            <div class="inhalt">
              <div class="inhaltbox_1">

              </div>
              <div class="inhaltbox_2">
                <ul>
                  <li>Kreatives Webdesign</li>
                  <li>Große Erfahrung mit Virtual Reality</li>
                </ul>
              </div>
            </div>
            <div class="skill">
              <table>
                <caption>skill</caption>
                <tr class="skillname">
                  <th>html</th>
                  <th>css</th>
                  <th>javascript</th>
                  <th>aframe</th>
                </tr>
                <tr class="skillicons">
                  <td>icon</td>
                  <td>icon</td>
                  <td>icon</td>
                  <td>icon</td>
                </tr>
                <tr class="sterne">
                  <td>&#9733; &#9733; &#9733;</td>
                  <td>&#9733; &#9733; &#9733;</td>
                  <td>&#9733; &#9733; &#9734;</td>
                  <td>&#9733; &#9733; &#9733;</td>
                </tr>
              </table>
            </div>
          </div>

这里有一些 CSS：

.title {
  width: 100%;
  }

.inhalt {
  content: "";
  width:100%;
  display: table;
  clear: both;
}

.inhaltbox {
  float: left;
  width: 50%;
}

.skill {
  justify-content: space-around;
  width:100%;
}

【问题讨论】：

标签： css layout html-table css-selectors

【解决方案1】：

我想这就是你想要的：

.title {
  width: 100%;
  text-align: center;
  }

.inhalt {
  width:100%;
  display: table;
  clear: both;
}

.inhaltbox {
  float: left;
  width: 50%;
}

.skill {
  justify-content: space-around;
  width:100%;
}

table {
  width: 100%;
}

<div id="Webdevelopment">
            <div class="title">Webdevelopment</div>
            <div class="inhalt">
              <div class="inhaltbox_1 inhaltbox">
                 <ul>
                  <li>Kreatives Webdesign</li>
                  <li>Große Erfahrung mit Virtual Reality</li>
                </ul>
              </div>
              <div class="inhaltbox_2 inhaltbox">
                <ul>
                  <li>Kreatives Webdesign</li>
                  <li>Große Erfahrung mit Virtual Reality</li>
                </ul>
              </div>
            </div>
            <div class="skill">
              <table>
                <caption>skill</caption>
                <tr class="skillname">
                  <th>html</th>
                  <th>css</th>
                  <th>javascript</th>
                  <th>aframe</th>
                </tr>
                <tr class="skillicons">
                  <td>icon</td>
                  <td>icon</td>
                  <td>icon</td>
                  <td>icon</td>
                </tr>
                <tr class="sterne">
                  <td>&#9733; &#9733; &#9733;</td>
                  <td>&#9733; &#9733; &#9733;</td>
                  <td>&#9733; &#9733; &#9734;</td>
                  <td>&#9733; &#9733; &#9733;</td>
                </tr>
              </table>
            </div>
          </div>
here some css:

【讨论】：