使用HTML和CSS创建布局

下面的图表是在一次面试提问中给我的，面试官告诉我，我在我的代码中没有清楚地说明这两个方面

我试过这样的东西。但是没有得到想要的结果

.name3{
边框：1px纯黑；
高度：50px；
宽度：90px；
}
.姓名{
边框：1px纯黑；
高度：10px；
宽度：90px；
}
.name1{
边框：1px纯黑；
高度：40px；
宽度：30px；
}
#姓名2{
边框：1px纯黑；
高度：20px；
宽度：30px；
浮动：左；
}

试试这个

.name3{
边框：1px纯黑；
高度：55px；
宽度：100px；
浮动：左；
}
.姓名{
边框：1px纯黑；
高度：10px；
宽度：99px；
浮动：左；
}
.name1{
边框：1px纯黑；
高度：42px；
宽度：34px；
浮动：左；
}
#姓名2{
边框：1px纯黑；
高度：20px；
宽度：30px；
浮动：左；
}

---

我试图用Flexbox重现这一点

在这里您可以了解更多信息：

.top、.side、.square{
填充物：5px；
框大小：边框框；
边框：1px纯黑；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
宽度：200px；
}
.集装箱{
显示器：flex；
弯曲方向：行；
最大宽度：200px；
}
.container.main.content{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.container.main.content.square{
宽度：50%；
}

顶部
一边
广场
广场
广场
广场

你好，西敏，我已经阅读了你的问题，下面是我的解决方案。在编辑器中复制下面的代码。还要注意，我使用opera浏览器来运行这段代码，所以如果您使用不同的浏览器，输出可能会有一点差异。祝你好运

.姓名3{
边框：1px纯黑；
高度：53px；
宽度：93px；
}
.姓名{
边框：0.5px纯黑；
高度：10px；
宽度：92px；
浮动：左；
}
.name1{
边框：0.5px纯黑；
高度：41px；
宽度：30px；
浮动：左；
清除：左；
}
#名称2{
高度：20px；
宽度：30px；
边框：0.5px纯黑；
浮动：左；
明确：无；
}

使用宽度百分比怎么样

<div class="wrapper">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
</div>

---

在面试中编写代码时，请尝试编写有效的代码。id不能重复，您有3个id相同的div。。。。这本身就会让你的面试官给你一个糟糕的评价。这是面试问题的一部分，我想他们希望看到浮动而不是flexbox的使用。

<div class="wrapper">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
</div>

.wrapper, .header, .sidebar, .article{
   border: 1px solid black;
   float: left;
}
.wrapper {
   height: 100px;
   width: 100px;
}
.header{
  width: 100%;  
  height: 20px;
}
.sidebar {
   height: 80px;
   width: 33.33%;
}
.article {
    height: 40px;
    width: 33.33%;
}