CSS Float для изображений не работает правильно - PullRequest
Новая
       0

CSS Float для изображений не работает правильно

0 голосов
/ 06 марта 2020

Я хотел создать веб-сайт с тремя картинками, которые были бы с правой стороны экрана, при этом текст был бы с левой стороны от него. Проблема в том, что, хотя я правильно установил float:right;, текст отталкивает изображения вниз. 

body {
  background: #1a0000;
  padding: 10px;
}

img {
  width: 300px;
  height: 150px;
}

h1 {
  padding-top: 30px;
  font-size: 40px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #b30000;
}

.txt {
  padding: 0;
}

.logo {
  border-top: 10px solid #b30000;
  border-bottom: 10px solid #b30000;
}

.floatleft {
  display: :block;
  float: left;
}

.floatright {
  display: block;
  float: right;
}

.clanok {
  color: white;
  font-size: 20px;
}

.txt {
  text-align: left;
}

article :first-child {
  font-size: 20px;
}

.sd {
  float: right;
  padding-bottom: 10px;
  clear: both;
  border: 5px solid #b30000;
  max-width: 300px;
  max-height: 400px;
  overflow: scroll;
}

.sd img {
  display: block;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">

<head>
  <title>Dota 2 demonology</title>
</head>

<body>
  <div class="logo">
    <img src="dota2.png" class="floatleft">
    <h1>Demonologia v Doto2</h1>
  </div>

  <div class="clanok">
    <article>
      <p>
        Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some
        text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
      </p>

      <aside class="sd floatright">
        <q>
					<img src="sd.jpg">
					Shadow Demon <br>
					Some text Some text Some text Some text Some text Some text Some text Some text 
				</q>
      </aside>

      <aside class="sd floatright">
        <q>
					<img src="sf.png">
					Shadow Fiend <br>
					Some text Some text Some text Some text Some text Some text 
				</q>
      </aside>

      <aside class="sd floatright">
        <q>
					<img src="doom.jpg">
					Doom <br>
					Some text Some text Some text Some text Some text Some text Some text 
				</q>
      </aside>
    </article>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

У вас есть опечатка в вашем CSS. Вы написали двоеточие дважды. Исправление, которое должно это исправить. 

display: :block;
0 голосов
/ 06 марта 2020

Первое p должно быть width: 45%; (в этом случае! Обычно оно должно составлять 100% минус все, что находится на другой стороне) и float: left;, затем удалить clear: both; из .sd

body {
	background: #1a0000;
	padding: 10px;
}

img {
	width: 300px;
	height: 150px;
}

h1 {
	padding-top: 30px;
	font-size: 40px;
	font-family: "Comic Sans MS", cursive, sans-serif;
	color: #b30000;
}

.txt {
	padding: 0;
}

.logo {
	border-top: 10px solid #b30000;
	border-bottom: 10px solid #b30000;
}

.floatleft {
	display: block;
	float: left;
}

.floatright {
	display: block;
	float: right;
}

.clanok {
	color: white;
	font-size: 20px;
}

.txt {
	text-align: left;
}

article :first-child {
	font-size: 20px;
}
.first-p {
  float: left;
  width: 45%;
}

.sd {
	float: right;
	padding-bottom: 10px;
	border: 5px solid #b30000;
	max-width: 300px;
	max-height: 400px;
	overflow: scroll;
}

.sd img {
	display: block;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<head>
	<title>Dota 2 demonology</title>
</head>
<body>
	<div class="logo">		
	<img src="dota2.png" class="floatleft">
	<h1>Demonologia v Doto2</h1>
	</div>
		
		<div class="clanok">
			<article>
				<p class="first-p">
					Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
				</p>
				
				<aside class="sd floatright">
				<q>
					<img src="sd.jpg">
					Shadow Demon <br>
					Some text Some text Some text Some text Some text Some text Some text Some text 
				</q>
				</aside>

				<aside class="sd floatright">
				<q>
					<img src="sf.png">
					Shadow Fiend <br>
					Some text Some text Some text Some text Some text Some text 
				</q>
				</aside>

				<aside class="sd floatright">
				<q>
					<img src="doom.jpg">
					Doom <br>
					Some text Some text Some text Some text Some text Some text Some text 
				</q>
				</aside>
			</article>
		</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...