Правильное позиционирование

@km_zed · Регистрация: 09.11.2015

Author24 — интернет-сервис помощи студентам

Добрый день друзья. Недавно начал изучать веб-программирование и сейчас делаю тестовое задание. Возник вопрос по поводу позиционирования в css. Это часть задания, остальное знаю как сделать, загвоздка только в этом.

Все очень примитивно, есть страничка с определенным кол-вом кнопок, слева от них должно находиться изображение. Кнопки создал, задал им стиль, изображение есть, ему тоже дал стиль. При моем коде картинка располагается ниже, надо сразу слева. Пробовал по-разному, position, float, слоями и т.д., никак не пойму почему не выходит. Объясните пожалуйста как правильно сделать. Код ниже, скрины приложил.

HTML5

<html>
    <head>
        <title>TEST</title>
        <style>
            button {
                cursor: pointer;
                text-align: left;
                width:130px;
                height:25px
                }
            img {
                width:250px;
                height:250px;
                }
        </style>
    </head>
    <body>
        <div id="button"><button>first</button>
        <div id="button"><button>second</button>
        <div id="button"><button>third</button>
        <div id="button"><button>fourth</button>
        <div id="button"><button>fifth</button>
        <div id="img"><img src="C:\img\keep.png">
        </body>
</html>

@thedude · 09.01.2017, 13:59

Почему у вас закрывающие </div> отсутствуют?
Поднимите изображение выше кнопок в html коде и укажите ему

CSS

1	#img {float:left;}

HTML5

<div id="img"><img src="http://www.astrogalaxy.ru/foto001/20040314_0119_eit_304.GIF"></div>
<div id="button"><button>first</button>
<div id="button"><button>second</button></div>
<div id="button"><button>third</button></div>
<div id="button"><button>fourth</button></div>
<div id="button"><button>fifth</button></div>

https://jsfiddle.net/tjoqqjet/

@km_zed · 09.01.2017, 15:26 **[ТС]**

Извиняюсь, не то скопировал)

HTML5

<html>
    <head>
        <title>TEST</title>
        <style>
            button {
                cursor: pointer;
                text-align: left;
                width:130px;
                height:25px
                }
            img {
                width:250px;
                height:250px;
                }
        </style>
    </head>
    <body>
        <div id="button"><button>first</button></div>
        <div id="button"><button>second</button></div>
        <div id="button"><button>third</button></div>
        <div id="button"><button>fourth</button></div>
        <div id="button"><button>fifth</button></div>
        <div id="img"><img src="C:\img\keep.png"></div>
        </body>
</html>

Добавлено через 1 минуту
Изображение слева у меня получалось сделать, а вот справа никак.

Добавлено через 26 минут
Может не стоит кнопки объединять? Сделать каждую отдельно?

Добавлено через 38 минут
Проблема решена, сам додумался.

HTML

HTML5

<html>
    <head>
        <title>TEST</title>
    </head>
    <body>
  <div class ="left">
        <div id="button"><button>first</button></div>
    <div id="button"><button>second</button></div>
    <div id="button"><button>third</button></div>
    <div id="button"><button>fourth</button></div>
    <div id="button"><button>fifth</button></div>
  </div>
  <div class ="right">
    <div id="img"><img src="C:\path_to_img\first.jpg"></div>
  </div>
</body>
</html>

CSS

button {
    cursor: pointer;
    text-align: left;
    width:130px;
    height:25px
}
img {
    width:250px;
    height:250px;
}
.left {
  width: 132px;
  float: left;
}
.rigth {
  width: 250px;
  float: left;
}

	09.01.2017, 15:26