Как отобразить картинку справа от div?

Ferum1

Осваиваюсь на форуме
49
0 / 0

Как отобразить картинку справа от div?

« : 27.09.2016, 21:50:53 »

Не получается картинку (638535328.jpg) расположить справа от div, переходит на следующую строку и все...
прилагаю HTML и CSS

Код


<!DOCTYPE HTML>
<html>
<head>

<meta charset="utf-8"> 

<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto" rel="stylesheet">

<title>Страница авторизации</title>

</head>
<body>
<header>
<h1>АСУ ПК</h1>
</header>

<section>
    <article>
	

<div class=subscribe>

<form action="" method="post">

<label for="title">Email</label>
<input type="email" name="email" placeholder="email">
<br>

<label for="title">Пароль</label>
<input type="password" name="Пароль" placeholder="пароль">

<br>
<label for="input">Язык</label>
<select size="1" name="lang">
		<option selected="selected">Ру</option>
		<option>EN</option>
</select>
<br>

<input type="submit" value="Вход в программу">
</form>
</div>

  <img class="imgleft" src="images/638535328.jpg" alt="">

    </article>
	
	</section>
	
<footer>
<h1>&nbsp;</h1>
</footer>
</body>

<html>

CSS

Код


/* --------------- reset.css --------------- */
HTML, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;                               /* îáíóëßåì îòñòóïû è óáèðàåì áîðäþðû */
	vertical-align: baseline;          /* ïðèâîäèì âñå ê îäíîé áàçîâîé ëèíèè */
	background: transparent;      /* ÷òîáû íå ïðîñêàêèâàëè ëåâûå ôîíû, óñòàíîâëåííûå ïî óìîë÷àíèþ */
	font-size: 100%;                     /* ðàçìåð øðèôòà âñåì îäèíàêîâûé */
}
a {                                      	     /* ññûëêà íå â îáùåì ñïèñêå ÷òîáû íå ñáðàñûâàòü outline ïî óìîë÷àíèþ */
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	outline:none;
}
table {						/* óñòðàíßåì îòñòóïû ìåæäó ß÷åéêàìè òàáëèöû */
	border-collapse: collapse; 
	border-spacing: 0;
}
td, td img {
	vertical-align: top;			/* âîçâðàùàåì ïðèâû÷íîå âåðòèêàëüíîå âûðàâíèâàíèå */
} 
input, select, button, textarea {
	margin: 0; 				/* óáèðàåì îòñòóïû ïî óìîë÷àíèþ äëß ýëåìåíòîâ ôîðì (â ÷àñòíîñòè äëß checkbox è radio) */
	font-size: 100%; 			/* äåëàåì ðàçìåð øðèôòîâ âåçäå îäèíàêîâûì */
	outline: none;
}
input[type="text"], input[type="password"], textarea {
	padding: 0; 				/* óáèðàåì âíóòðåííèå îòñòóïû äëß òåêñòîâûõ ïîëåé */
}
input[type="checkbox"] { 		/* âåðòèêàëüíîå âûðàâíèâàíèå ÷åêáîêñîâ è ðàäèîáàòîíîâ îòíîñèòåëüíî ìåòîê */
	vertical-align: bottom;
}
input[type="radio"] {
	vertical-align: text-bottom;
}
sub {
	vertical-align: sub;
	font-size: smaller;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
nav ul {
	 list-style:none;
}
/* --------------- /reset.css --------------- */

/* --------------- áàçîâûå íàñòðîéêè ---------*/
HTML {
	min-height:100%; /* âñåãäà ïîêàçûâàåì âåðòèêàëüíóþ ïîëîñó ïðîêðóòêè  */
}
body {
	color: #000;
	text-align: left;
	font-size: 1em; /* èñïîëüçóåì áåçîïàñíûå øðèôòîâûå CSS ñòåêè */
	min-height:100%;
	background: #cdebfa;
	font-family: 'Roboto', sans-serif;
}
a, a:visited { /* ïîðßäîê ïðàâèë äëß ññûëîê èìååò çíà÷åíèå */
	color: #e6618c;
	text-decoration: underline;
}
a:hover {
	color: #fdf208;
	text-decoration:none;
}
a:focus, a:active {
	color: #c83867;
	text-decoration: underline;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
}
img{

	max-width:100%;
}
.clr{
	clear:both;
}
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
/* --------------- /áàçîâûå íàñòðîéêè ---------*/

header{
	background:url(images/638535326.jpg) center center no-repeat; color:#fff; text-align:center; vertical-align:middle; background-size:cover;
	padding:20px 20px 20px 20px;
	}
	
	header>h1{
		font-size:5.00em; font-family: 'Open Sans', sans-serif; margin-bottom:25px; font-weight:bold; font-style:italic;
	}
	.subscribe {
	background:rgba(9,16,79,1); display:table; height:337; width:328; padding: 40px 20px 40px 20px; margin:5px 0px 5px 0px;
	line-height:30px;

}
	.subscribe input{
    float:right;
	} 
	.subscribe select{
    float:right;
	}
	.subscribe label{
    float:left;
	}
	
.subscribe label{
padding: 0px 0px 0px 5px; color: #ffffff; font-size: 0.94em; margin-top: 20px; height: 30px; width: 60px;

}

.subscribe input[type="email"], input[type="password"], select[name="lang"] {
	padding: 0px 0px 0px 5px; border: 0; height: 30px; width: 220px; margin-top: 20px; font-size: 0.94em; 
	color: #515151; box-sizing: border-box;	
	/* óáèðàåì âíóòðåííèå îòñòóïû äëß òåêñòîâûõ ïîëåé */
}

.subscribe input[type="submit"] {
	padding: 0px 0px 0px 5px; background: #ffffff; border:0; color: #515151; font-size: 0.94em;
    cursor: pointer; height: 30px; width: 150px; margin-top: 30px; margin-right: 70px; box-sizing: border-box;
}

article {
	width: 1100px;
}

footer{
	background:url(images/638535326.jpg) center center no-repeat; color:#fff; text-align:center; vertical-align:middle; background-size:cover;
	padding:20px 20px 20px 20px;
	}
		footer>h1{
		font-size:5.00em; font-family: 'Open Sans', sans-serif; margin-bottom:25px; font-weight:bold; font-style:italic;
	}

Записан

Ilhom666

Завсегдатай
1384
184 / 0

Re: Как отобразить картинку справа от div?

« Ответ #1 : 28.09.2016, 00:01:10 »

Код: css


.imgleft {
		display: inline-block;
		vertical-align: top;
		max-width: 60%;  /* или сколько там надо */
	}
.subscribe {
	display: inline-block;
 }

Записан

Ferum1

Осваиваюсь на форуме
49
0 / 0

Re: Как отобразить картинку справа от div?

« Ответ #2 : 28.09.2016, 09:54:37 »

работает, спасибо!

Записан

Как отобразить текст только на мобильных, на Пк и планшетах скрыть? Автор web1	Ответов: 6 Просмотров: 3137	20.09.2022, 22:14:03 от darkghost
Как разместить картинку за текстом в статье? Автор PNP	Ответов: 11 Просмотров: 1871	10.08.2021, 20:59:27 от PNP
Можно ли прописать в scss ссылку и установить картинку? Автор vova630	Ответов: 0 Просмотров: 810	02.01.2021, 13:56:09 от vova630
Как last-child отобразить первым? Автор master-smeta	Ответов: 5 Просмотров: 1055	20.12.2019, 15:32:44 от beliyadm
Не могу вывести картинку нужно размера Автор stonehand	Ответов: 3 Просмотров: 1065	22.03.2019, 21:55:29 от sivers

Как отобразить картинку справа от div? - Вопросы по CSS

Новости Joomla

WT JShopping Add order info to checkout finish плагин для Joomla

Joomla 6 нуждается в вашей помощи с тестированием.Вышел недавно релиз Joomla 6 alpha1

Вышла Phoca Gallery 5.1.0

Ferum1

Как отобразить картинку справа от div?

Ilhom666

Re: Как отобразить картинку справа от div?

Ferum1

Re: Как отобразить картинку справа от div?

Похожие темы