Блог

Главная - Вопросы по программированию - Переместить заголовок 1 и заголовок 2 справа от изображения

Переместить заголовок 1 и заголовок 2 справа от изображения

#html #css

#HTML #css

Вопрос:

Я хочу иметь <h1> и <h2> справа от изображения, но <h2> должно быть под <h1> . Как мне это сделать?

Мой код

 <html>
<link rel="stylesheet" href="style.css">
<img src="images/SelzerSeal.jpg" alt="Henry Selzer attorney at law">
<h1>Test</h1><br>
<h2>Test 2</h2>
</html>

CSS

 img {
max-width: 100%;
text-align: center;
float:left;
}
h1{
color:white;
font-size: 24px;
float:left;
font-family:"Book Antiqua";
}
h2 {
color:white;
font-size:20px;
float:left; 
font-family:"Times New Roman";
}

Ответ №1:

попробуйте это: 

 .img {
  float: left;
  margin-right: 10px;
}  
 <img src="http://lorempixel.com/400/200" alt="" class="img">
<h1>Header H1</h1>
<h2>Header H2</h2>

Надеюсь, я вам помог.

Ответ №2:

Попробуйте избавиться от float: left; свойства в обоих тегах заголовка, также избавьтесь от <br> тега в html, и div с классом «очистить» не требуется.

Вот пример:

https://jsfiddle.net/t769avo2/

Ответ №3:

Вам не нужно добавлять значение float ни в h1, ни в h2

Посмотреть демонстрацию

 <html>
<link rel="stylesheet" href="style.css">
<img src="images/SelzerSeal.jpg" alt="Henry Selzer attorney at law">
<h1>Test</h1>
<h2>Test 2</h2>
</html>

img {
max-width: 100%;
float:left;
margin-right: 1%}
h1{
color:white;
font-size: 24px;
font-family:"Book Antiqua";
}
h2 {
color:white;
font-size:20px;
font-family:"Times New Roman";
}

Ответ №4:

Просто удалите floats из ваших тегов заголовка:

 body {
  background:#000;
}
img {
  max-width: 100%;
  text-align: center;
  float:left;
}
h1{
  color:white;
  font-size: 24px;
  font-family:"Book Antiqua";
}
h2 {
  color:white;
  font-size:20px;
  font-family:"Times New Roman";
}  
 <img src="http://placehold.it/250x250" alt="Henry Selzer attorney at law">
<h1>Test</h1><br>
<h2>Test 2</h2>