Позиция блочных элементов на странице

Stack Overflow на русском Asked by user306630 on November 13, 2021

Когда делаю 3 блочных элемента одинакового размера и добавляю их в другой div, то они "выстраиваются" в вертикальном порядке, т.е 1 блок, ниже его еще 1 блок, и ниже еще 1 блок. Как сделать так, чтобы они были в горизональном порядке, т.е 1 блок с края, справа еще 1, и справа еще один? Код внизу.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Меню сайта</title>
</head>
<body>
<style>
    #menu {
        width: 1280px;
        height: 1280px;
        border: 1px solid black;
        margin: 250px auto 250px auto;
    }

    #logo {
        margin-left: 540px;
    }


    #a {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }

    #b {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: inline-block;
    }

    #c {
     width: 200px;
     height: 200px;
     border: 1px solid black;
    }
</style>
<div id="menu">
<img id="logo" src="youtubeicon.png" alt="">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

css html

One Answer

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Меню сайта</title>
</head>
<body>
<style>
    #menu {
        width: 1280px;
        height: 1280px;
        border: 1px solid black;
        margin: 250px auto 250px auto;               
    }

    #logo {
        margin-left: 540px;
    }

    #a {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display : inline-block;
    }

    #b {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: inline-block;
    }

    #c {
     width: 200px;
     height: 200px;
     border: 1px solid black;
      display : inline-block;
    }
</style>
<div id="menu">
<img id="logo" src="youtubeicon.png" alt="">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

Answered by John Bilous on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!