将标题1和标题2移动到图像右侧

时间:2016-10-18 19:16:23

标签: html css

我希望<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> 之下。我该怎么做?

我的代码

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";
}

CSS

{{1}}

4 个答案:

答案 0 :(得分:1)

尝试在两个标头标签上删除float: left;属性,同时删除html中的<br>标记,并使用类&#34;清除&#34;没有必要。

以下是一个例子:

https://jsfiddle.net/t769avo2/

答案 1 :(得分: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 :(得分:0)

只需从标题标记中删除floats

&#13;
&#13;
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";
}
&#13;
<img src="http://placehold.it/250x250" alt="Henry Selzer attorney at law">
<h1>Test</h1><br>
<h2>Test 2</h2>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您不需要将float添加到h1或h2

See demo

<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";
}