Как использовать только теги divs и css

Question

Я довольно новичок в HTML и CSS, поэтому, возможно, это сумасшедший простой вопрос.

Вопрос: Как это сделать, используя только divs и css?

Я не хочу использовать <table> <tr> <th> <td>....

Answer 1

Вот основные настройки, что вы просите помощи flexbox собственности.

CSS3 Гибкой коробка или flexbox, представляет собой режим компоновки, предусматривающий расположения элементов на странице таким образом, что элементы ведут себя предсказуемо, когда макет страницы должен учитывать различный экран размеров и другой дисплей устройства. Для многих приложений модель гибкого ящика обеспечивает улучшение по сравнению с моделью блока в , что оно не использует поплавки, а также поля полей гибкого контейнера не совпадают с полями его содержимого.

Подробнее об этом at MDN и поэкспериментируйте с ним, чтобы вам было удобно пользоваться им. Настройка может быть не идеальной, но она дает хорошее начало для желаемого макета. Испытание и ошибка, это лучший способ узнать.

div { 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    min-height: 20px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: row-wrap; 
 
    width: 100%; 
 
} 
 

 
.column { 
 
    flex: 1 1 100%; 
 
} 
 

 
.middle { 
 
    flex-basis: 200%; 
 
} 
 

 
.middle-top, 
 
.right-top, 
 
.right-bottom { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    width: 100%; 
 
} 
 

 
.language, 
 
.search, 
 
.login, 
 
.signup, 
 
.some-text, 
 
.avatar { 
 
    flex: 1 1 50%; 
 
}

<div class="container"> 
 

 
    <div class="column left"> 
 
    <div class="social"> 
 
     Social icons 
 
    </div> 
 
    <div class="logo"> 
 
     Logo 
 
    </div> 
 
    </div> 
 
    <div class="column middle"> 
 
    <div class="middle-top"> 
 
     <div class="language"> 
 
     Language 
 
     </div> 
 
     <div class="search"> 
 
     Search 
 
     </div> 
 
    </div> 
 
    <div class="slogan"> 
 
     Slogan 
 
    </div> 
 
    <div class="menu"> 
 
     Menu 
 
    </div> 
 
    </div> 
 
    <div class="column right"> 
 
    <div class="right-top"> 
 
     <div class="login"> 
 
     Login 
 
     </div> 
 
     <div class="signup"> 
 
     Signup 
 
     </div> 
 
    </div> 
 
    <div class="right-middle"> 
 
     Welcome guest 
 
    </div> 
 
    <div class="right-bottom"> 
 
     <div class="some-text"> 
 
     <div class="something"> 
 
      Some text 
 
     </div> 
 
     <div class="something"> 
 
      Some text 
 
     </div> 
 
     </div> 
 
     <div class="avatar"> 
 
     Avatar 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>