Создание макета с использованием HTML и CSS - PullRequest
Новая
       2

Создание макета с использованием HTML и CSS

0 голосов
/ 09 октября 2018

Приведенная ниже диаграмма была дана мне во время интервью, и интервьюер сказал, что мне не хватает ясности: оба в моем коде.

enter image description here

Я попробовал что-то вроде этого.Но не смог получить желаемых результатов 

.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>

Ответы [ 4 ]

0 голосов
/ 09 октября 2018

Как насчет использования процента в ширину 

<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%;
}
0 голосов
/ 09 октября 2018

Я попытался воспроизвести это с Flexbox.

Здесь вы можете узнать больше: https://www.w3schools.com/css/css3_flexbox.asp

.top,.side,.square {
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.container .main {
  display: flex;
  flex-direction: row;
  max-width: 200px;
}

.container .main .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container .main .content .square {
  width: 50%;
}
<div class="container">
  <div class="top">.top</div>
  <div class="main">
    <div class="side">.side</div>
    <div class="content">
      <div class="square">.square</div>
      <div class="square">.square</div>
      <div class="square">.square</div>
      <div class="square">.square</div>
    </div>
  </div>
</div>
0 голосов
/ 09 октября 2018

Привет SIMIN Я прочитал ваш вопрос, и вот мое решение для этого.Скопируйте код ниже в вашем редакторе.Также обратите внимание, что я использовал браузер Opera для запуска этого кода, поэтому, если вы используете другой браузер, может быть небольшая разница в выводе.Удачи 

<html>
    <head>
        <style>
            .name3{
                border: 1px solid black;
                height: 53px;
                width: 93px;
                }

            .name{
                  border: 0.5px solid black;
                  height: 10px;
                  width: 92px;
                  float: left;
                }

            .name1{
                  border: 0.5px solid black;
                  height: 41px;
                  width: 30px;
                  float: left;
                  clear: left;
                }

            #name2one{
                height: 20px;
                width: 30px;
                border: 0.5px solid black;
                float: left;
                clear: none;
            }


        </style>
    </head>
    <body>
        <div class="name3">
            <div class="name"></div>
            <div class="name1"></div>
            <div id="name2one"></div>
            <div id="name2one"></div>
            <div id="name2one"></div>
            <div id="name2one"></div>
        </div>
    </body>
</html>
0 голосов
/ 09 октября 2018

Попробуйте это 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...