CSS布局:按正确的顺序排列元素

Question

我需要一些布局帮助。下面的容器(.webdevelopment(应该是这样的：标题应在中心对齐100%宽度；那么两个"innhaltbox"div的50%，然后是具有100%的skilltabele和childs应该有空间。我想我有一些选择器的问题，一些帮助会很好。

<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%;
}

Answer 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: