时间戳

首页 > 解决方案 > Creating a layout using HTML and CSS

html - Creating a layout using HTML and CSS

问题描述

The below diagram was given to me in an interview questions and the interviewer told me that I am missing clear:both in my code.

enter image description here

I tried something like this. But couldn't get the desired results

.name3 {
  border: 1px solid black;
  height: 50px;
  width: 90px;
}

.name {
  border: 1px solid black;
  height: 10px;
  width: 90px;
}

.name1 {
  border: 1px solid black;
  height: 40px;
  width: 30px;
}

#name2 {
  border: 1px solid black;
  height: 20px;
  width: 30px;
  float: left;
}
<body>
  <div class="name3">
    <div class="name"></div>
    <div class="name1"></div>
    <div id="name2"></div>
    <div id="name2"></div>
    <div id="name2"></div>
    <div id="name2"></div>
  </div>

</body>

标签： htmlcss

解决方案

尝试这个

.name3 {
    border: 1px solid black;
    height: 55px;
    width: 100px;
    float: left;
}
.name {
    border: 1px solid black;
    height: 10px;
    width: 99px;
    float: left;
}
.name1 {
    border: 1px solid black;
    height: 42px;
    width: 34px;
    float: left;
}
#name2 {
    border: 1px solid black;
    height: 20px;
    width: 30px;
    float: left;
}
<body>
  <div class="name3">
    <div class="name"></div>
    <div class="name1"></div>
    <div id="name2"></div>
    <div id="name2"></div>
    <div id="name2"></div>
    <div id="name2"></div>
  </div>

</body>

推荐阅读